在 React 应用开发中，我们经常需要使用 toasts 来提醒用户。React-Redux-Toastr 是一个非常好用的插件，它提供了简单易用的 API，并且高度可定制。我们可以根据自己的需要来配置 toast 的外观和行为。然而，React-Redux-Toastr 的默认样式可能与我们的应用主题风格不符。这时，我们就可以使用 react-redux-toastr-custom 来自定义 toast 样式。
安装 react-redux-toastr-custom
使用 npm 安装 react-redux-toastr-custom：
npm install react-redux-toastr-custom --save
配置
在使用 react-redux-toastr-custom 之前，我们需要先进行配置。在我们的 Redux 的配置文件中，引入并使用 react-redux-toastr-custom。
-- -------------------- ---- ------- ------ - ------- -- ------------- - ---- --------------------------- ------ - --------------- - ---- ------- ----- ----------- - ----------------- -- -- ------- ------- -------------- -- ------ ------- -----------
使用
显示 toasts
react-redux-toastr-custom 提供了两种不同的方法来显示 toasts：在组件中和直接通过 Redux。
在组件中使用：
-- -------------------- ---- -------
------ - --------------- ----- - ---- ---------------------------
------ ---------------------------------------------------------------------
-------- ------------- -
------ -
-----
------- ----------- -- -------------------- ----------
---- -----
---------
--------------- --
------
-
-直接通过 Redux 使用：
-- -------------------- ---- -------
------ - ------- -- ------------- - ---- ---------------------------
------ - ------- - ---- -------------
----- ----------- ------- --------------- -
----------- - -- -- -
----- - --- - - ----------
-----
----- ----------
------ --------
-------- --------
--
-
-------- -
------ -
-----
------- ---------------------------
---- -----
---------
------
-
-
-
----- ------------------ - -
---- ------------------
-
------ ------- ------------- --------------------------------自定义样式
在 React-Redux-Toastr 中，我们可以使用 Infinite 和 Message 组件来自定义 toast 的样式。react-redux-toastr-custom 也提供了这两个组件，并且可以对它们的样式进行自定义。
-- -------------------- ---- -------
------ - ------------ - ---- ---------------------------
----- ----------- - -
------------- ------
---------------- ----------
------ ---------
-
----- ----------- - -- -------- -------- ----- -- -- -
-------------
-----------------
-------------------
-----------------
-------------
--
-在使用时，将 CustomToast 组件传递给 toasts 的相关 API 中：
-- -------------------- ---- -------
------ - --------------- ----- - ---- ---------------------------
------ ---------------------------------------------------------------------
-------- ------------- -
------ -
-----
------- ----------- --
-------------------- -------- -
---------- -----------
---
-
---- -----
---------
--------------- --
------
-
-小结
在本文中，我们学习了 react-redux-toastr-custom 的基本用法和自定义样式的方法。通过配置和使用 react-redux-toastr-custom，我们可以轻松地实现自定义样式的 toast 功能，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d681e8991b448e0310