使用React toastify npm库实现应用反应警报通知的教程

应用程序中的反应警报通知用于显示带有用户自定义信息的警报通知，其中一些例子是成功信息，记录被添加，错误信息-发现重复记录，警告和信息信息。

在本教程中，你将了解到如何使用react-toastify npm库实现警报通知。

这个npm库有很多功能：

• 开源，易于配置和定制
• 以编程方式控制通知
• 自定义样式和显示位置，如顶部、左侧、底部
• 包括进度条
• 包的大小非常小。

首先，让我们使用create-react-app 命令创建一个新的 react 应用程序。

npx create-react-app react-toast-tutorial

这将创建一个react-toast-tutorial项目，并创建所有运行项目所需的文件，安装部署程序。

接下来，进入应用程序的根文件夹，运行npm run start命令。

npm run start

这将在浏览器中启动应用程序，并能够通过localhost:3000访问。

添加toastify npm依赖性

进入应用程序文件夹，运行以下命令来安装react-toastify npm 依赖项

npm install --save react-toastify

这将更新package.json，并将该依赖关系安装到应用程序的node_modules文件夹中。

 "dependencies": {
    "react": "17.0.0",
    "react-dom": "17.0.0",
    "react-toastify": "^6.2.0"
  }

其次，在应用程序中添加所需的css文件

将 react-toastify css 导入 react 组件。

它提供了你需要导入组件中的css样式

import 'react-toastify/dist/ReactToastify.css';

ToastContainer 和toast ，这两个类被导入到你的应用程序中以显示敬酒通知。

 import { toast, ToastContainer } from "react-toastify";

ToastContainer 是一个应用程序的容器，你需要包括根组件。这必须被加载到DOM树中。然而，这些并不要求在每个组件中添加它。

 <ToastContainer closeButton={false} position="bottom-right" />

toast的配置方法

toast.configure()必须在根组件中调用，这是一个一次性的过程。

  toast.configure();

这可以配置配置对象，这是一个配置对象。

这可以用来配置吐司弹出窗口的定制方式。

toast.configure({
  autoClose: 10000,
  draggable: true,
});

接下来，可以使用toast对象来显示弹出窗口

Toast.success/error/info/warn/dark/default(message,optionalobject)

一个例子，配置成功的弹出窗口显示在右上方的位置

  toast.success("Success message", {
    position: "top-right",
    pauseOnHover: true,
    draggable: false,
    progress: undefined,
  });

可选的对象包含以下参数

• 位置值左上角、右上角、中上角，左下角、右下角、中下角
• 可拖动的弹出窗口是可拖动还是不可拖动，真/假
• progress是配置进度条

以编程方式解散toast

toast.dismiss()是用代码来关闭toast的。

在根部组件中，在应用程序根部导入并配置ToastContainer。

App.js代码。

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

export default function App() {
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <BasicToast />
      <ToastContainer closeButton={false} position="bottom-right" />
    </div>
  );
}

让我们以创建Toast组件为例

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import { toast, Zoom } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

class BasicToast extends Component {
  constructor() {
    super();
  
  }

  showError = () => {
    toast.error("ERROR Notification");
  };

  showSuccess = () => {
    toast.success("Success Notification");
  };

  showInfo = () => {
    toast.info("Info Notification");
  };

  showWarn = () => {
    toast.warn("Warn Notification");
  };

 render() {
    return (
      <div>
        <div>
          <span>
            <button onClick={this.showError}>Error </button>
          </span>
          <span>
            <button onClick={this.showSuccess}>Success </button>
          </span>
          <span>
            <button onClick={this.showInfo}>Info </button>
          </span>
          <span>
            <button onClick={this.showWarn}>Warn </button>
          </span>
        </div>
      </div>
    );
  }
}

export default BasicToast;

现在，运行该项目并渲染输出:

假设，callAPI是一个异步方法，成功时返回API的响应，错误时返回API的响应。

在promise then方法中，toast.dismiss关闭了已经显示在浏览器上的toast.error，调用toast.success获得错误结果。

callAPI().then(response => {
    if (response.error) {
        toast.dismiss();
        toast.error("ERROR while calling API");
    } else {
        toast.dismiss();
        toast.success("API SUCCESS Done");
        }
});

总结

这篇文章讲述了基本的toast组件。