react_toastify__WEBPACK_IMPORTED_MODULE_1__.toast.configure 不是一个函数

Question

我正在尝试实现 React Toastify 以在我们的应用程序中显示通知，但它不起作用，给出错误“react_toastify__WEBPACK_IMPORTED_MODULE_1__.toast.configure 不是一个函数”

我正在使用 React-Toastify 的最新版本“10.0.4”

我已经尝试过以下：

App.js

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

toast.configure();
function GeeksforGeeks() {
  const notify = () => {
  // inbuilt-notification
  toast.warning("Danger");
  // inbuilt-notification
  toast.success("successful");
  // inbuilt-notification
  toast.info("GeeksForGeeks");
  // inbuilt-notification
  toast.error("Runtime error");
  // default notification
  toast("Hello Geeks");
};

 return (
   <div className="GeeksforGeeks">
     <button onClick={notify}>Click Me!</button>
   </div>
  );
}

export default GeeksforGeeks;

任何人都可以请推荐一个漂亮且简单的库来在应用程序中显示通知？

我的要求是我需要如下通知，其中包含标题、描述和单击通知时应关闭的关闭图标。我尝试过 React-hot-toast 但它似乎不符合我的要求。

Answer 1

根据 Moshe Fortgang 的评论，toast.configure() 方法已在 React Toastify 版本 9 中删除。我再次搜索并找到了修复程序。 我使用了相同的库 React-Toastify 并解决了这个问题。通过以下代码

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


function Example() {
  const notify = () => {
    toast("Default Notification !");

    toast.success("Success Notification !", {
      position: "top-center"
    });

    toast.error("Error Notification !", {
      position: "top-left"
    });

    toast.warn("Warning Notification !", {
      position: "bottom-left"
    });

    toast.info("Info Notification !", {
      position: "bottom-center"
    });

    toast("Custom Style Notification with css class!", {
      position: "bottom-right",
      className: 'foo-bar'
    });
  };

  return (
    <>
      <button onClick={notify}>Notify</button>;
      <ToastContainer transition={Slide} />
    </>
  );
}

export default Example;