介绍
在前端的项目中，我们经常需要实现弹窗提示功能，@lagun4ik/react-redux-toastr 就是一个非常方便的开源的 npm 包，它可以让我们轻松地实现弹窗提示功能。本篇文章将介绍 @lagun4ik/react-redux-toastr 的使用方法和一些注意事项，帮助你更好地使用它。
安装
在开始之前，我们需要确保已经安装了 react 和 redux，因为 @lagun4ik/react-redux-toastr 是基于这两个库的。
- 使用 npm 安装 @lagun4ik/react-redux-toastr
--- ------- ------ ----------------------------
- 引入 CSS 样式，可以直接在 index.js 中导入进行全局设置，也可以引入到单独的组件中进行局部设置。你可以在 node_modules/@lagun4ik/react-redux-toastr/lib/css/react-redux-toastr.min.css 找到样式文件。
------ -----------------------------------------------------------------
- 在 redux 的 createStore 方法中，将 @lagun4ik/react-redux-toastr 传入中间件（middleware），这是使用 @lagun4ik/react-redux-toastr 的前提条件。
------ - ------------ --------------- - ---- --------
------ - ------------ - ---- ---------------
------ --------------- ---- --------------
------ -------------------- ---- -------------
------ - ------------- -------------- - ---- ----------------
------ ------- ---- ----------------------------
------ ----------- ---- --------------
------ - ------- -- ------------- - ---- ---------------------
----- ------------- - -
---- -------
--------
---------- ---------
--
----- ---------------- - ---------------
--------------
-----------------
---------------
------- --------------
---
--
----- ---------------- - ---------------
----- -------------- - -----------------------
----- ---------- - -
----------------
---------------
-----------------
-----------------
--
------ ----- ----- - ------------
-----------------
-------------------------------
--
------ ----- --------- - --------------------我们可以看到，在 createStore 方法中，我们将 @lagun4ik/react-redux-toastr 的 reducer 引进了 combineReducers 方法中，这是为了在组件中可以访问 @lagun4ik/react-redux-toastr 的 state。
使用
使用 @lagun4ik/react-redux-toastr 是非常简单的，我们只需要在需要的地方引入 Toastr 组件，并调用 Toastr 的方法即可。
------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - ------- -- ------------- - ---- ---------------------
----- ------- ------- --------- -
------------------ -
-------------
-
------------------- -
-- ---------- ---------------------- ------
-
---------------------- -
--------------------------
-- ------------------------
-
-------- -
------ -----
-
-
------ ------- --------
-----
-------- -- --
------- --------------------------------- ----------
---
-----------在上面的代码中，我们通过 connect 方法将 toastrActions 绑定到了组件的 props 上，这样我们就可以在组件中使用 toastrActions 提供的各种方法。
toastrActions 的方法
@lagun4ik/react-redux-toastr 提供了以下方法，可以满足我们日常的提示需求：
- success(title, message, options)
- info(title, message, options)
- warning(title, message, options)
- error(title, message, options)
- light(title, message, options)
- message(type, title, message, options)
- clean()
这些方法的作用都是一样的，只是 type 参数不同。我们在具体使用的时候根据需求选择方法即可。message 是提示消息内容，title 是提示消息标题，options 是自定义选项，包括以下几个参数：
- attention: bool，是否高亮提示框
- closeButton: bool，是否显示关闭按钮
- debug: bool，是否启用调试模式
- progressBar: bool，是否显示进度条
- removeOnHover: bool，鼠标悬停是否关闭提示框，默认为 false
- showCloseButton: bool，是否显示关闭按钮，默认为 false
- timeOut: int，提示框自动关闭的时间，默认为 3000，单位为毫秒
- transitionIn: string，提示框进入的动画，默认为 bounceIn
- transitionOut: string，提示框消失的动画，默认为 bounceOut
示例代码
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - ------- -- ------------- - ---- ---------------------
----- ------- ------- --------- -
------------------ -
-------------
---------- - -
----- ---
--
-
------------------- -
------------- - -------------- -- -
-- ---------------- -- -- -
---------------------------------- ------
-----------------------------
-------
-
---------------
----- --------------- - --
---
-- ------
-
---------------------- -
--------------------------
-----------------------------
-
-------- -
----- - ---- - - -----------
------ -
-----
---------- -
------
--
-
-
------ ------- --------
-----
-------- -- --
------- --------------------------------- ----------
---
-----------上面的代码展示了如何在组件中引入 @lagun4ik/react-redux-toastr，并使用 success 方法进行提示。在这个例子中，我们实现了一个倒计时功能，在组件加载成功后，通过定时器进行倒计时，并使用 success 方法进行提示。
总结
通过本篇文章的介绍，我们了解了如何使用 @lagun4ik/react-redux-toastr 实现弹窗提示功能。在实际的开发中，我们可以根据不同的需求选择相应的方法进行提示。在使用时，还需要注意在 redux 的 createStore 方法中将 @lagun4ik/react-redux-toastr 传入中间件（middleware），这是使用 @lagun4ik/react-redux-toastr 的前提条件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559da81e8991b448d75be