React-toastr2 是一个基于 React 的轻量级通知提示库，可以用于向用户展示成功、错误、警告等信息。本文将介绍如何使用这个 npm 包，并给出相应的示例代码。
安装和引入
在项目根目录下执行以下命令：
--- ------- ------------- ------
在需要使用该库的文件中，引入 react-toastr2：
------ - --------------- ----- - ---- ----------------
其中 ToastContainer 是提示框容器，必须包含在 React 页面中，而 toast 是一个静态方法，用于向容器中添加新的提示框。
使用方法
成功提示
----------------------
以上代码将在界面上展示一个绿色的成功提示框，内容为“操作成功”。
错误提示
--------------------
以上代码将在界面上展示一个红色的错误提示框，内容为“操作失败”。
警告提示
------------------
以上代码将在界面上展示一个黄色的警告提示框，内容为“请注意”。
自定义提示
----- ------------------- - -------------------------------------------- -------------------------- --------------- --- - ----- -------- ---
以上代码创建了一个自定义的提示框，内容为“自定义提示”。
参数配置
react-toastr2 提供了一些可配置参数，可以在创建容器时进行设置。
--------------- ---------- -- - ------------------- - ---- -- ----------------------------------------- --------------------------- ----------- ----------------- ------------------- --
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| ref | function | 回调函数，用于获取容器的引用 | |
| toastMessageFactory | function | ToastMessage.animation | 自定义提示框的工厂函数，使用时需传入一个由 React.createFactory 创建的组件 |
| className | string | toast-top-right | 容器的 CSS 类名，用于控制位置和样式 |
| newestOnTop | boolean | false | 控制新的提示框是否显示在最上面 |
| preventDuplicates | boolean | true | 是否防止重复提示，如果为 true，当相同内容的提示框已经存在时，不会重复出现 |
| transition | JSX | Bounce | 动画效果，使用时需传入一个与 react-css-transition-group 兼容的 JSX 组件，具体使用方法见官方文档 |
| closeButton | boolean | false | 是否显示关闭按钮 |
| closeOnToastrClick | boolean | false | 是否在点击提示框时关闭提示框 |
| closeOnToastrHover | boolean | false | 是否在鼠标悬停提示框时关闭提示框 |
| progressBar | boolean | false | 是否显示进度条，如果为 true，将在提示框底部添加一个进度条，表示该提示框在几秒后自动关闭 |
| timeOut | number | 5000 | 自动关闭时间，单位为毫秒 |
| extendedTimeOut | number | 1000 | 在用户鼠标悬停提示框时，提示框最多还能存在的毫秒数 |
| enableMultiContainer | boolean | false | 是否允许多个容器存在 |
| targetId | string | 指定容器的唯一 ID，仅当 enableMultiContainer 为 true 时生效 |
|
| toastOptions | object | 具体配置项参见下面的章节 | |
| preventOpenDuplicate | boolean | false | 如果为 true，当重复调用 toast 方法时，不会弹出新的提示框，而是更新已有的提示框的状态，仅适用于成功和警告提示 |
toastOptions 参数
toastOptions 参数用于自定义提示框的样式和行为，其具体配置项如下：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| closeButton | boolean | false | 是否显示关闭按钮 |
| iconClassName | string | toast-${options.type}-icon | 自定义图标的 CSS 类名，其中 options.type 表示提示框的类型 |
| iconClassNames | object | { error: "toast-error-icon", info: "toast-info-icon", success: "toast-success-icon", warning: "toast-warning-icon" } | 不同类型的提示框分别对应的图标样式类 |
| onOpen | func | 当提示框打开时执行的回调函数，函数参数 signature: (...args: any[]) => void，其中 args 包含了调用 toast 方法时传入的所有额外参数 |
|
| onRemove | func | 当提示框被移除时执行的回调函数，函数参数 signature: (...args: any[]) => void，其中 args 包含了调用 toast 方法时传入的所有额外参数 |
|
| onCloseClick | func | 当点击提示框的关闭按钮时执行的回调函数，函数参数 signature: (...args: any[]) => void，其中 args 包含了调用 toast 方法时传入的所有额外参数 |
|
| progressBar | bool | false | 是否显示进度条，如果为 true，将在提示框底部添加一个进度条，表示该提示框在几秒后自动关闭 |
| showCloseButton | bool | false | 是否显示关闭按钮 |
| timeOut | number | 5000 | 自动关闭时间，单位为毫秒 |
| transitionIn | string | bounceIn | 提示框进入时的动画效果，可选值包括 fadeIn, bounceIn, flipInX 等，参见 react-bulma-notify |
| transitionOut | string | bounceOut | 提示框离开时的动画效果，可选值包括 fadeOut, bounceOut, flipOutX 等，参见 react-bulma-notify |
| type | string | info | 提示框的类型，可选值包括 info, success, error, warning，分别表示信息提示、成功提示、错误提示和警告提示，也可以自定义一个与其它框架兼容的类型 |
示例代码
下面是一个完整的示例代码：
------ ------ - --------- - ---- --------
------ - --------------- ----- - ---- ----------------
----- --- ------- --------- -
--------------- -
---------------------- ---------------
-
------------- -
------------------ ---------------
-
--------------- -
------------------- ---------------
-
-------------- -
----- ------------------- - --------------------------------------------
-------------------------- --------------- ------------- --- -
----- --------
---
-
-------- -
------ -
-----
------- ------------------------------------ ---------------------
------- -------------------------------- ---------------------
------- ------------------------------------ ---------------------
------- ---------------------------------- ---------------------
--------------- --
------
--
-
-
------ ------- ----以上代码定义了四个按钮，分别用于显示不同类型和自定义内容的提示框。在渲染时，需要将 <ToastContainer> 包含在页面中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055eaa81e8991b448dc17d