概述
tocco-react-redux-toastr 是一个基于 React 和 Redux 的弹出消息通知组件。它支持多种弹出样式和自定义样式，能够让你在应用程序中轻松添加通知功能，提高用户体验。
在本文中，我们将讨论 tocco-react-redux-toastr 的使用方法和其重要的配置选项。
安装
tocco-react-redux-toastr 是一个 npm 包，在使用它之前需要先安装它。可以通过以下命令进行安装：
npm install tocco-react-redux-toastr --save
配置
在使用 tocco-react-redux-toastr 之前，需要对它进行配置。
版本匹配
确保安装的 tocco-react-redux-toastr 版本与你使用的 React 和 Redux 版本匹配。具体的版本匹配表可以在 tocco-react-redux-toastr GitHub 页面 中查看。
初始化
在你的应用程序中，你需要将 tocco-react-redux-toastr 与 Redux Store 结合起来。可以通过以下方式将 tocco-react-redux-toastr 配置为 Redux Store 的一个 middlewares：
import { createStore, applyMiddleware } from 'redux';
import { reducer as toastrReducer } from 'react-redux-toastr';
import thunkMiddleware from 'redux-thunk';
const store = createStore(
mainReducer,
applyMiddleware(thunkMiddleware, toastrMiddleware()),
);注意，tocco-react-redux-toastr 提供了一个 reducer，用于处理弹出消息通知的 state。
环境配置
在运行环境中，你需要在 Redux Store 中导入以下中间件：
import { middleware as toastrMiddleware } from 'react-redux-toastr';以上中间件会使用 tocco-react-redux-toastr 的默认配置。如果你需要个性化配置，可以在引入中间件时传入自定义配置项，如下所示：
-- -------------------- ---- -------
------ - ------- -- ------ - ---- ---------------------
------ - ---------------- ----------- - ---- --------
------ ------------ ---- ---------------
----- ---------------- - ---------------
----- ----- - ------------
------------
----------------
----------------
-----------------
--------
-------- ------
------------ ------
--------- ------------
------------ -----
------------- -----------
-------------- ------------
------------------- -----
---
--
--你可以在配置项中设置以下选项：
timeOut
此选项用于设置消息通知的显示时间，单位为毫秒。默认为 5000 毫秒。
newestOnTop
此选项用于控制新的消息通知是否会在旧的消息通知之前显示。默认为 true。
position
此选项用于设置弹出消息通知的位置。可以用以下位置关键字之一：
- top-left
- top-right
- top-center
- bottom-left
- bottom-center
- bottom-right
默认为 top-right。
progressBar
此选项用于设置弹出消息通知是否包含进度条。默认为 true。
transitionIn
此选项用于设置消息通知弹出时的动画效果。默认为 fadeIn。
transitionOut
此选项用于设置消息通知退出时的动画效果。默认为 fadeOut。
closeOnToastrClick
此选项用于设置单击消息通知时是否隐藏消息。默认为 false。
使用
现在已经完成了 tocco-react-redux-toastr 的初始化和配置，下面将介绍如何在应用程序中实际使用它。
显示消息通知
要显示一个弹出消息通知，只需要调用对应的方法即可。下面是三种常用的显示方法：
toastr.success
这个方法用于显示成功消息通知：
toastr.success('Success message!', 'Title', { /* options */ });第一个参数是要显示的消息文本。第二个参数是要显示的标题。第三个参数是选项，可以通过预定义的浅色和深色主题来自定义通知样式。
toastr.error
这个方法用于显示错误消息通知：
toastr.error('Error message!', 'Title', { /* options */ });第一个参数是要显示的消息文本。第二个参数是要显示的标题。第三个参数是选项，用于设置消息通知的样式和其他属性，如同上所述。
toastr.warning
这个方法用于显示警告消息通知：
toastr.warning('Warning message!', 'Title', { /* options */ });第一个参数是要显示的消息文本。第二个参数是要显示的标题。第三个参数是选项，用于设置消息通知的样式和其他属性，如同上所述。
隐藏消息通知
可以使用以下方法隐藏弹出的消息通知：
toastr.remove
这个方法可以用于删除指定的消息通知：
const alertRef = toastr.success('Hello, world!', 'Welcome!');
// Remove the message after 10 seconds
setTimeout(() => {
toastr.remove(alertRef);
}, 10000);调用 toastr.success 方法时，它会返回一个唯一的引用。我们可以将这个引用存储在变量中，并在 setTimeout 调用中，使用它来删除特定的消息通知。
toastr.clean
这个方法可以删除所有弹出消息通知：
toastr.clean();
示例代码
下面是一个使用 tocco-react-redux-toastr 的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ ------ ---- ---------------------
----- ----------- ------- --------- -
--------------------------- -
------ ------ -
---- ----------
------------------- --------- --- ------------- -----------
------
---- --------
---------------- ----- -------- ----- ---------- --- ------------ ---------
------
---- ----------
---------------------- -- ------- ---- --- ------------ -----------
------
--------
------
-
-
-------- -
------ -
-----
------- ----------- -- ------------------------------------------- ------- ---------------
------- ----------- -- ----------------------------------------- ----- ---------------
------- ----------- -- ------------------------------------------- ------- ---------------
------
--
-
-
------ ------- ------------本例中，我们定义了一个 React 组件，其中包含三个按钮和一个消息通知的弹出方法 handleShowToastrClick。该方法根据点击的按钮类型来显示不同类型的弹出通知。
结论
tocco-react-redux-toastr 是一个易于使用和高度可定制的弹出消息通知组件，可以方便地增强你的应用程序的用户体验。在本文中，我们了解了 tocco-react-redux-toastr 的重要组件和配置选项，并使用一个示例应用程序演示了如何使用它在 React 应用程序中显示弹出消息通知。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf381e8991b448e6a47