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);
    }
  }

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

我做了很多搜索，确实遇到了this thread并应用了建议的更改，但是我仍然得到重复！

Answer 1

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

您的代码设计有些复杂。让我向您展示如何使用基本的强化功能。

Firstyle导入软件包。（第1步）

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

现在，您可以叫吐司了。（第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
  });

就是这样。

Answer 2

import React from 'react';
import Routes from './route/route';
import { ToastContainer, toast } from 'react-toastify';

class App extends React.Component {
constructor() {
super();
}

componentDidMount() {
let root = document.querySelector('#root');
root.children[0].remove()
}

render() {
return (
  <>
    <ToastContainer
      position="top-right"
      autoClose={5000}
      hideProgressBar={false}
      newestOnTop={false}
      closeOnClick
      rtl={false}
      pauseOnFocusLoss
      draggable
      pauseOnHover
    />
    
    <ToastContainer />
    <Routes />
   </>
    )
   }
  }

  export default App;

因此在ComponentDidMount中，两行解决了我的问题，实际上在我的IDK中，为什么ToastContainer组件呈现两次，所以我删除其中之一。

Answer 3

将<ToastContainer/>添加到App.tsx或任何您命名的默认根App.js文件中。之后，请勿将<ToastContainer/>添加到其他位置。

      <ToastContainer 
            position='top-right' 
            autoClose={5000}
            hideProgressBar={false}
            newestOnTop={false}
            closeOnClick
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover
        />

REACT-Toastify-重复吐司

3 个答案: