使用 react-toastify 时出错，toast 不查看

Question

我明白了

Uncaught TypeError: Object(...) is not a function 在 useToastContainer (react-toastify.esm.js?146c:296) 在 ToastContainer (react-toastify.esm.js?146c:954) 在 mountIndeterminateComponent (react-dom.development.js?61bb:14563) 在 beginWork (react-dom.development.js?61bb:15063) 在 performUnitOfWork (react-dom.development.js?61bb:17820) 在 workLoop (react-dom.development.js?61bb:17860) 在 HTMLUnknownElement.callCallback (react-dom.development.js?61bb:149) 在 Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:199) 在 invokeGuardedCallback (react-dom.development.js?61bb:256) 在 replayUnitOfWork (react-dom.development.js?61bb:17107)

我的班级

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

export class ViewAllGraphs extends React.Component {
constructor(props) {
        super(props);

        this.notify = this.notify.bind(this);
    }
    notify() {
        console.log("call notify");
        toast("Wow so easy !");
    }

    addGraph(id) {
        console.log("addGraph");
        console.log(id);
        console.log(toast);
        toast.configure();
        this.notify();
    }

渲染方法返回

<img onClick={this.addGraph.bind(this, item.id)} src={`data:image/png;base64,${item.image}`} />

我是 js 新手，如何通过点击图片来调用 toast？

我的控制台日志

addGraph ViewAllGraphs.js?5897:52 6011412ff65b72973fc0f495

ViewAllGraphs.js?5897:53//它的 id ƒ toast(content, options) {
return dispatchToast(content, mergeOptions(TYPE.DEFAULT, options)); }

ViewAllGraphs.js?5897:54 调用通知 ViewAllGraphs.js?5897:41

Answer 1

您需要记住在渲染中包含<ToastContainer />。这是您的工作代码以及Sandbox：

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

export default class extends React.Component {
  constructor(props) {
    super(props);

    this.notify = this.notify.bind(this);
  }
  notify() {
    console.log("call notify");
    toast.success("This is a test success", {
      position: toast.POSITION.TOP_CENTER,
      autoClose: 2000,
      hideProgressBar: true
    });
  }

  render() {
    return (
      <div>
        Click the image
        <br />
        <img onClick={this.notify} src="https://via.placeholder.com/140x100" />
        <ToastContainer />
      </div>
    );
  }
}

Answer 2

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

const AlertToast = () => {
  const notify = () =>
    toast("This is an alert message. This is an alert message.");

  return (
    <div>
      <button onClick={notify}>Notify !</button>
      <ToastContainer />
    </div>
  );
};

export default AlertToast;