如何在React中创建像Toast这样的全局组件并在任何其他组件中引用它？

Question

我正在尝试使用React创建一个App.我想在应用程序中全局添加一个Toast组件,以便其他组件可以引用它来显示自定义消息.

我想在以下层次结构中添加toast:

ReactDOM.render(
        <BrowserRouter>
            <section>
                  <App />
                  <Toast />
            </section>
        </BrowserRouter>

并参考应用程序内的Toast组件.我该如何实现它？

Answer 1

首先，您需要导入ToastContainer和CSS文件：

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

然后在 App.js 的顶部添加ToastContainer：

<React.Fragment>
        <ToastContainer />
        <NavBar ... />
        ....
</React.Fragment>

然后您可以通过导入 Toast在任何组件、类和函数中使用toast弹出窗口：

import { toast } from "react-toastify";

然后将其与toast()ortoast.error()或toast.info()等方法一起使用

toast("Wrong email or Password");
...
toast.error("Some kind of Error");

希望能帮助到你 ！

Answer 2

你应该安装包 https://www.npmjs.com/package/react-toastify 然后添加导入和添加

<ToastContainer />

在您的标题或某些组件,如在每个页面使用的侧边栏.您现在可以在任何页面上显示Toast消息

toast.error("this is toast error");