前言
在前端开发领域中，常常需要在页面中展示提示信息，如表单验证错误、异步请求的结果等等。而使用 react-toastify 这个 npm 包，可以轻松地在页面中展示漂亮的 toast 提示框，让用户体验更加友好。
本篇文章将为大家介绍如何使用 react-toastify 这个 npm 包，包括如何安装、如何使用以及如何自定义 toast 样式等内容。
安装
使用 npm 命令进行安装：
--- ------- --------------
使用
基本使用
首先，在要使用 toast 的组件中引入 react-toastify：
------ - --------------- ----- - ---- ----------------- ------ ----------------------------------------
然后在组件的 render 函数中添加 <ToastContainer /> 标签：
--------------- --
这个标签放在最外层，会自动渲染一个固定位置的容器。接下来，就可以在需要的地方使用 toast 了，比如在一个点击事件的回调函数中：
-----------------------
使用 toast 函数生成 toast 提示框，其中 success 是 toast 的类型，表示成功提示框。
自定义类型
react-toastify 包提供了几种不同的 toast 提示框类型：
error：表示错误提示框warning：表示警告提示框info：表示普通信息提示框success：表示成功提示框
可以根据实际需要自定义其它类型。比如，为了实现一个提示正在保存的 toast 提示框，可以这样定义一个新的类型：
------------------ ------------ - ----- -------- ---
其中 configure() 方法用于初始化 toast，type 属性用于指定类型。
自定义样式
react-toastify 包还支持自定义 toast 提示框的样式。比如，可以通过配置 ToastContainer 的 position 属性来指定弹出框的位置：
--------------- ----------------------- --
此外，也可以通过在 toast 函数的第一个参数设置自定义的组件来实现完全自定义样式的 toast 提示框：
------------------ --- - ---------- -------------- ---
其中 CustomToast 是自定义的 toast 提示框组件，className 属性用于设置该组件的样式类。
示例代码
下面是一个完整的示例代码，包括基本使用、自定义类型和自定义样式：
------ ----- ---- --------
------ - --------------- ----- - ---- -----------------
------ ----------------------------------------
-------- ------------- -
-- ------------- -----
----- ----------- - -- -- -
-----------------------
--
------ -
-----
------- ---------------------------------
--- -- -------------- ---
--------------- ----------------------- --
--- ------ ----- ---
------- ----------- -- ------------ - ----- -------- ----------------
--- ------ ----- ---
------- ----------- -- ------------------ --- - ---------- -------------- ------------------
------
--
-
-- --- ----- --
-------- ------------- -
------ ----------- ----- ----------
-
------ ------- ------------总结
react-toastify 是一个轻量级但功能强大的 toast 效果插件，它不仅提供了多种类型的 toast 提示框，还支持完全自定义样式，适用于大多数前端项目中的提示需求。通过本篇文章的介绍，相信读者们已经能够轻松地使用和定制这个插件了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/the-react-toastify