React-toastify通知不会以条件形式返回

Question

只需按一下按钮，通知就可以很轻松地工作。但是，我尝试在道具通过时激活它(true/false)。

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

然而，如果不是一个按钮，我就不能让它工作。道具通过很好，我可以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;

Answer 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 for the solution

首先，将if语句与函数一起使用，并将其放入componentDidMount中，因为我猜这是为了停止呈现元素本身的呈现；其次，通过在呈现函数之前声明它，使toast函数可由组件mount和按钮访问希望我已经足够清楚了