REACT-Toastify - 复制吐司

Question

我刚刚将 React-Toastify 添加到我的 REACT 应用程序中。我的 Apps.js 中有以下代码

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

function App() {
  return (
    <>
      <Router basename={process.env.PUBLIC_URL}>
        <div className="container-fluid">
          <NavHeader />
          <hr />
          <Switch>
            <Route exact path="/" component={HomePage} />
            <Route path="/about" component={AboutPage} />
            <Route path="/contact" component={ContactPage} />
          </Switch>
        </div>
      </Router>
      <div>
        <ToastContainer transition={Slide} />
      </div>
    </>
  );
}

export default App;

然后在我的其他页面中，我使用下面的代码显示 Toast。

  showToastMessage(messageText, messageType = "I") {
    toast.dismiss();
    toast.configure({
      position: toast.POSITION.BOTTOM_RIGHT,
      toastId: 1
    });
    if (messageType === "S") {
      toast.success(messageText);
    }
    if (messageType === "I") {
      toast.info(messageText);
    }
    if (messageType === "E") {
      toast.error(messageText);
    }
  }

当我运行应用程序时，toast显示在我页面的右下角和右上角。

我进行了大量搜索，确实遇到了这个线程并应用了建议的更改，但我仍然得到重复！

Answer 1

如果你同时使用ToastContainer和toast 函数，你会看到两个 toastify。你应该只使用一个。

你的代码设计有些复杂。让我展示如何使用基本的 toastify，你就会明白。

Firstyle 导入包。（第1步）

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

现在，您可以调用 toast。（第2步）

 toast.configure();

 toast.success("Success Notification !", {
    position: toast.POSITION.TOP_CENTER
  });

  toast.error("Error Notification !", {
    position: toast.POSITION.TOP_LEFT
  });

  toast.warn("Warning Notification !", {
    position: toast.POSITION.BOTTOM_LEFT
  });

  toast.info("Info Notification !", {
    position: toast.POSITION.BOTTOM_CENTER
  });

就是这样。