如何在 React 中使用 React-Toastify 创建自定义通知

通知消息通常用于 Web 应用程序中以显示警告、错误、成功消息和其他有价值的信息。有一些流行的包和框架可用于在 React 中制作消息。 React-Toastify 是一个 React 库，可让您向应用程序添加通知和警报消息。

安装 React Toastify

在 React 项目中安装 Toastify，请在项目目录中运行此命令：

npm install --save react-toastify

设置 Toastify

要使用 Toastify 包，需要导入包提供的 ToastContainer、toast 方法和随附的 CSS 文件。

App 组件内的 ToastContainer 存储所有创建的 toast 通知。

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

function App() {
  return(
    <div>
      <ToastContainer/>
    </div>
  );
}

可以使用 toast 方法为 React 项目创建 toast 通知：

function App() {
  const notify = () => toast.success("Hello There!");

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

单击此代码生成的按钮将调用 toast.success 方法，将“Hello There!”字符串传递给它。 这将创建一个 toast 通知，在屏幕上显示消息，如下所示：

请注意，可以调用不同类型的 toast 方法，例如 toast.info()、toast.error()、toast.success()、toast.warning()。 这些方法中的每一个都有一些微妙的颜色样式来反映消息的类型。

定位 Toast 通知

默认情况下，toast 通知会从 Web 应用程序屏幕的右上角弹出。 您可以通过在 ToastContainer 上设置位置属性来更改此设置。 有六个位置值可用：右上、中上、左上、右下、中下和左下。

将 ToastContainer 上的 position 属性设置为左上角可确保所有 Toast 通知都从屏幕的左上角弹出，例如：

function App() {
  const notify = () => toast.success("Hello There!");

  return(
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer position="top-left"/>
    </div>
  );
}

也可以使用 toast 方法的 position 属性更改单个 toast 通知的默认位置，例如：

function App() {
  const notify = () => toast.success("Hello There!", {position: toast.POSITION.TOP_CENTER});

  return(
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer position="top-left"/>
    </div>
  );
}

还可以使用 CSS position 属性定位 Toast 通知，但 Toastify 的 position 属性是执行此操作的标准方法。

处理 Toast 方法和 ToastContainer 的 autoClose 属性

可以更改 Toast 通知的显示时间。 可以使用 autoClose 属性控制 toast 通知保持打开的时间。 可以更改所有 toast 通知和特定于个人的 toast 通知的延迟时间。autoClose 属性只接受布尔值 false 或以毫秒为单位的持续时间。

要更改所有 toast 通知的延迟时间，请在 ToastContainer 元素中使用 autoClose 属性。例如：

function App() {
  const notify = () => toast.success("Hello There!");

  return(
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer autoClose={5000}/>
    </div>
  );
}

通过以上设置，所有 toast 通知将显示整整五秒（5,000 毫秒）。

使用每个 toast 方法的 autoClose 属性，您可以自定义单个 toast 通知的延迟时间。例如：

function App() {
  const notifyOne = () => toast.info("Will close in 10 seconds", {autoClose: 10000});
  const notifyTwo = () => toast.info("Will close in 15 seconds", {autoClose: 15000});

  return (
    <div>
      <button onClick={notifyOne}>Notify One</button>
      <button onClick={notifyTwo}>Notify Two</button>
      <ToastContainer />
    </div>
  );
}

为了防止 toast 通知默认关闭，您可以将 autoClose 属性设置为 false。 您可以通过将 ToastContainer 的 autoClose 属性设置为 false 来确保用户必须手动关闭每个 toast 通知。例如：

function App() {
  const notify = () => toast.info("Hello There!");

  return (
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer autoClose={false} />
    </div>
  );
}

将单个 toast 方法的 autoClose 属性设置为 false 还将确保这些特定的 toast 通知默认情况下不会关闭。

使用 Toastify 呈现非字符串通知

使用 Toast 通知时，您可以将字符串、React 组件和数字呈现为通知消息。 要将 React 组件呈现为 toast 通知，您可以创建组件并使用 toast 方法呈现它。例如：

function Message({toastProps, closeToast}) {
  return (
    <div>
     <p>Welcome {toastProps.position}</p>
     <button onClick={closeToast}></button>
    </div>
   )
}

export default Message;

此代码块创建一个组件 Message。 当将组件呈现为通知时，toast 会向您的组件添加 toastProps 和 closeToast 属性。 closeToast 属性是一个可用于关闭通知的函数。 toastProps 属性是一个对象，其属性存储有关 toast 通知的详细信息，包括其位置、类型和其他特征。

导入 Message 组件，然后将其传递给 toast() 函数，将其呈现为 toast 通知：

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

function App() {
  const msg = () => toast(<Message />);

  return (
    <div>
      <button onClick={msg}>Welcome</button>
      <ToastContainer />
    </div>
  );
}

单击该按钮将导致包含一个问题和两个按钮的通知显示在您的屏幕上。

更改Toast通知样式

您不必为 Toast 通知使用默认样式。 您可以自定义它们以适合您的 Web 应用程序所需的设计主题或模式。要设置 toast 通知的样式，请为其指定一个类名并在 CSS 文件中应用自定义设置。例如：

function App() {
  const notify = () => toast.success("Hello There!", {className: "toast-message"});

  return (
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer position="top-center" />
    </div>
  );
}

通过将 className 附加到通知，就可以在 CSS 文件中根据您的喜好设置 toast 通知的样式：

.toast-message {
  background-color: #000000;
  color: #FFFFFF;
  font-size: 20px;
  padding: 1rem 0.5rem;
}

上述自定义样式的通知将如下所示：

Web 应用程序的 Toast 通知

您现在可以使用 React-Toastify 包及其可用方法在 React 中创建自定义通知。 通过根据您的喜好设置这些自定义警报/通知的样式，您可以增强 Web 应用程序的用户体验。

React-Toastify 提供了一种快速有效的方法，可以毫不费力地在 React 项目中包含自定义通知。