在前端开发中，提示用户操作结果的消息框是一个非常基础但也非常必要的组件。React 社区中有很多成熟的消息框组件，其中 react-toastify-khawer 是一款易用而强大的 npm 包，本文将介绍它的使用教程和注意事项。
安装
首先，我们需要在项目中引入 react-toastify-khawer 并安装。在项目目录下使用 npm 命令行：
--- ------- ---------------------
安装完成后，在 React 组件中使用 import { ToastContainer } from 'react-toastify-khawer'; 引入 ToastContainer 组件。
使用方法
使用 ToastContainer 组件时，我们需要先在组件的最外层（例如 App.js）中添加一行代码，用于渲染消息框：
--------------- --
接着，在需要显示消息框的组件中，使用 import { toast } from 'react-toastify-khawer'; 引入 toast 方法，并在需要显示消息框时调用：
-------- ------------------ -
----- ------- - -- -- -
-----------------------
--
----- ------ - -- -- -
---------------------
--
------ -
-----
------- -----------------------------
------- ----------------------------
------
--
-以上代码将创建两个按钮，点击按钮时分别显示成功和失败的消息框。
更多配置
react-toastify-khawer 提供了丰富的配置方法，可以满足不同的需求。以下是一些常见的配置方法：
自定义位置
ToastContainer 可以在页面中的任意位置显示，使用 position 属性即可：
--------------- --------------------- --
自定义样式
ToastContainer 的样式可以使用 className 属性自定义，也可以在全局样式表中定义 Toastify__toast-container 和 Toastify__toast。
例如，要将消息框样式设置为深色，可以添加以下样式表：
---------------------- -
----------------- -----
------ -----
-自定义通知
除了成功和失败通知之外，react-toastify-khawer 还支持多种类型的消息框，如警告、信息等。使用 toast[type](message) 方法调用对应类型的消息框：
---------------------- ---------------------
总结
react-toastify-khawer 是一款易用而强大的 React 消息框组件，它具有丰富的配置方法和多种通知类型，可以满足不同的需求。在使用时，我们需要按照指引引入和配置组件，同时注意样式表的定义和不同类型的消息框的使用方法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056b6e81e8991b448e557d