npm 包 react-toastify 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发领域中，常常需要在页面中展示提示信息，如表单验证错误、异步请求的结果等等。而使用 react-toastify 这个 npm 包，可以轻松地在页面中展示漂亮的 toast 提示框，让用户体验更加友好。

本篇文章将为大家介绍如何使用 react-toastify 这个 npm 包，包括如何安装、如何使用以及如何自定义 toast 样式等内容。

安装

使用 npm 命令进行安装：

npm install react-toastify

使用

基本使用

首先，在要使用 toast 的组件中引入 react-toastify：

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

然后在组件的 render 函数中添加 <ToastContainer /> 标签：

<ToastContainer />

这个标签放在最外层，会自动渲染一个固定位置的容器。接下来，就可以在需要的地方使用 toast 了，比如在一个点击事件的回调函数中：

toast.success('保存成功!');

使用 toast 函数生成 toast 提示框，其中 success 是 toast 的类型，表示成功提示框。

自定义类型

react-toastify 包提供了几种不同的 toast 提示框类型：

error：表示错误提示框
warning：表示警告提示框
info：表示普通信息提示框
success：表示成功提示框

可以根据实际需要自定义其它类型。比如，为了实现一个提示正在保存的 toast 提示框，可以这样定义一个新的类型：

toast.configure();
toast('保存中', { type: 'saving' });

其中 configure() 方法用于初始化 toast，type 属性用于指定类型。

自定义样式

react-toastify 包还支持自定义 toast 提示框的样式。比如，可以通过配置 ToastContainer 的 position 属性来指定弹出框的位置：

<ToastContainer position="bottom-right" />

此外，也可以通过在 toast 函数的第一个参数设置自定义的组件来实现完全自定义样式的 toast 提示框：

toast(<CustomToast />, { className: 'custom-toast' });

其中 CustomToast 是自定义的 toast 提示框组件，className 属性用于设置该组件的样式类。

示例代码

下面是一个完整的示例代码，包括基本使用、自定义类型和自定义样式：

-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- ----- - ---- -----------------
------ ----------------------------------------

-------- ------------- -
  -- ------------- -----
  ----- ----------- - -- -- -
    -----------------------
  --

  ------ -
    -----
      ------- ---------------------------------

      --- -- -------------- ---
      --------------- ----------------------- --

      --- ------ ----- ---
      ------- ----------- -- ------------ - ----- -------- ----------------

      --- ------ ----- ---
      ------- ----------- -- ------------------ --- - ---------- -------------- ------------------
    ------
  --
-

-- --- ----- --
-------- ------------- -
  ------ ----------- ----- ----------
-

------ ------- ------------

总结

react-toastify 是一个轻量级但功能强大的 toast 效果插件，它不仅提供了多种类型的 toast 提示框，还支持完全自定义样式，适用于大多数前端项目中的提示需求。通过本篇文章的介绍，相信读者们已经能够轻松地使用和定制这个插件了。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/the-react-toastify