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

在前端开发中，提示用户操作结果的消息框是一个非常基础但也非常必要的组件。React 社区中有很多成熟的消息框组件，其中 react-toastify-khawer 是一款易用而强大的 npm 包，本文将介绍它的使用教程和注意事项。

安装

首先，我们需要在项目中引入 react-toastify-khawer 并安装。在项目目录下使用 npm 命令行：

npm install react-toastify-khawer

安装完成后，在 React 组件中使用 import { ToastContainer } from 'react-toastify-khawer'; 引入 ToastContainer 组件。

使用方法

使用 ToastContainer 组件时，我们需要先在组件的最外层（例如 App.js）中添加一行代码，用于渲染消息框：

<ToastContainer />

接着，在需要显示消息框的组件中，使用 import { toast } from 'react-toastify-khawer'; 引入 toast 方法，并在需要显示消息框时调用：

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

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

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

以上代码将创建两个按钮，点击按钮时分别显示成功和失败的消息框。

更多配置

react-toastify-khawer 提供了丰富的配置方法，可以满足不同的需求。以下是一些常见的配置方法：

自定义位置

ToastContainer 可以在页面中的任意位置显示，使用 position 属性即可：

<ToastContainer position="top-center" />

自定义样式

ToastContainer 的样式可以使用 className 属性自定义，也可以在全局样式表中定义 Toastify__toast-container 和 Toastify__toast。

例如，要将消息框样式设置为深色，可以添加以下样式表：

.Toastify__toast--dark {
    background-color: #333;
    color: #fff;
}

自定义通知

除了成功和失败通知之外，react-toastify-khawer 还支持多种类型的消息框，如警告、信息等。使用 toast[type](message) 方法调用对应类型的消息框：

toast.warning('请注意！');
toast.info('这是一条信息');

总结

react-toastify-khawer 是一款易用而强大的 React 消息框组件，它具有丰富的配置方法和多种通知类型，可以满足不同的需求。在使用时，我们需要按照指引引入和配置组件，同时注意样式表的定义和不同类型的消息框的使用方法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60056b6e81e8991b448e557d