0

通知很容易使用按钮。但是，我试图在道具通过时激活它（真/假）。

基本上，用户单击此选项卡，如果他们没有登录，它会弹出通知告诉他们登录。

但是，如果没有按钮，我无法使其工作。道具通过就好了，我可以console.log它。条件返回......一些东西，但它就像一堆奇怪的字母，每次刷新它都会改变。并且不会像通知一样弹出。它只是屏幕中间的模糊字母（因为 {notify} 放置在表单上方）。

    import React, {Component} from 'react';
    import { ToastContainer, toast } from 'react-toastify';
    import 'react-toastify/dist/ReactToastify.css';

    class Alerts extends Component {
      constructor(props){
        super(props)
        this.state = { 
          alertLogin: ''
        }
      }

      render() {

        const notify = () => toast("Please login before adding a recipe!");

        // tried to make a conditional to check if prop alertLogin is true or false
        // then calls notify function if false 
        if (!this.props.alertLogin) {
          console.log('alert props received', this.props.alertLogin)
          return notify()
        }

        return ( 
        <div>
          {/* <button onClick={notify}>Notify !</button> */}
          {notify}
          <ToastContainer />
        </div>
        );
      }
    }
    
    export default Alerts;
4

1 回答 1

1 
import React, { Component } from "react";
import "./styles.css";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
class Alerts extends Component {
  constructor(props){
    super(props)
    this.state = { 
      alertLogin: ''
    }
  }
  componentDidMount() {
    // tried to make a conditional to check if prop alertLogin is true or false
    // then calls notify function if false
    if (!this.props.alertLogin) {
      console.log("alert props received", this.props.alertLogin);
      this.notify();
    }
  }
  notify = () => toast("Please login before adding a recipe!");
  render() {
    return (
      <div>
        <button onClick={(e) => this.notify()}>Notify !</button>
        <ToastContainer />
      </div>
    );
  }
}
export default Alerts;

解决方案的 Codepen

首先，您将 if 语句与该函数一起使用并将其放入 componentDidMount 因为我猜是阻止渲染元素本身渲染第二个使组件可以访问 toast 函数确实 mount 和按钮通过在渲染函数之前声明它希望我是够清楚

于 2020-12-06T16:23:21.313 回答