Question

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

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

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

并参考应用程序内的Toast组件。我该如何实施呢？

Answer 1

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

<ToastContainer />

在您的标题中或某些组件（如每个页面上使用的侧边栏）中。您现在可以通过

在任何页面上显示Toast消息

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

Answer 2

首先，您需要导入 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()或toast.error()或toast.info()等方法一起使用

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

希望有帮助！

Answer 3

从npm安装toastify包将其导入您的程序并将以下内容添加到您的程序

<ToastContainer/>

您可能也对react-toastify感兴趣，所以请看一下。

Answer 4

您可以将Toast组件作为道具传递给App。

但这可能不是你应该做的。我假设您希望Toast组件由其他组件可以执行的各种操作触发。你会用州来做这件事。使Toast成为状态函数，并让其他组件修改状态。您可以使用plane old setState执行此操作，或使用Redux。虽然Redux的作者会告诉你只使用setState。

另外因为React已经有7个库可以做到这一点。 This one 看起来很有希望。

Answer 5

我已经尝试过这种方法（包括 ToastContainer 组件），但是 toast.something 没有通过 Toast 组件触发事件。我实现的解决方案是创建一个模拟组件行为的函数，而不是通过 props 传递条件，而是传递参数。举个例子：

import React from "react";
import { toast } from "react-toastify";

const Toast = (message, type) => {
  switch (type) {
    case "success":
      return toast.success(
        <div>
          <p>{message}</p>
        </div>
      );
    case "error":
      return toast.error(
        <div>
          <p>{message}</p>
        </div>
      );
    case "warning":
      return toast.warning(
        <div>
          <p>{message}</p>
        </div>
      );
    default:
      return toast.warning(
        <div>
          <p>Toast not defined...</p>
        </div>
      );
  }
};
export default Toast;

组件中的某处：

Toast('Action successfully executed!', 'success');

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

5 个答案: