简介
redux-dialog 是一个基于 React 和 Redux 的对话框组件。它采用了 Redux 的思想，将对话框的状态管理放在 Redux Store 中，通过 Action 触发对话框的打开和关闭。
安装
在项目的根目录下运行以下命令：
npm install redux-dialog --save
使用
redux-dialog 的使用非常简单，只需以下几步：
引入组件
import { Dialog } from 'redux-dialog';设置对话框
在 Redux 的 Store 中，我们需要设置一个对话框的数据对象，包含对话框的唯一标识、标题、内容等信息。
-- -------------------- ---- -------
----- --------- - -
----
-------- -
--------- -
------ --- --------
-------- ------- ---------
------- ------
-------- ------
----- ---
-
--
--显示对话框
在组件中，我们可以通过 React 的事件处理函数，如 onClick，来触发打开对话框。
-- -------------------- ---- -------
------ - ---------- - ---- ---------------
-- ---
-------- -
------ -
-----
------- ----------- -- --------------------------------------- ---------------
------- --------------- --
------
--
-监听对话框状态
在容器组件中，我们需要监听对话框的状态变化，来实现对话框的关闭。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ----------- - ---- ---------------
------ -------- ---- -------------
----- --------------- - ------- -- -
------ -
--------- -----------------------
--
--
----- ------------------ - -
------------
--
------ ------- ------------------------ ------------------------------在 MyDialog 组件中，我们可以触发 closeDialog Action，来关闭对话框。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- -------- ------- --------- -
-------- -
----- - ----- ------ -------- ------- ------- - - --------------------
----- - ----------- - - -----------
------ -
------- ----------- ------------- --------------- ----------- -- -------------------
---- -----------------------------------
------- ------------------ ----------- -- ------------------------ ---------------
---------
--
-
-
------ ------- ---------示例代码
在下面的示例代码中，我们创建了一个按钮和一个对话框。点击按钮，会触发打开对话框的事件。在对话框中，会显示一段文本和一个按钮。点击按钮，会触发关闭对话框的事件。
-- -------------------- ---- -------
-- -----------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------- ----------- - ---- ---------------
----- -------- ------- --------- -
-------- -
----- - ----- ------ -------- ------- ------- - - --------------------
----- - ----------- - - -----------
------ -
------- ----------- ------------- --------------- ----------- -- -------------------
---- -----------------------------------
------- ------------------ ----------- -- ------------------------ ---------------
---------
--
-
-
----- --------------- - ------- -- -
------ -
--------- -----------------------
--
--
----- ------------------ - -
------------
--
------ ------- ------------------------ -------------------------------- -------------------- ---- -------
-- ------
------ ------ - --------- - ---- --------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ - ------- -- ------------- - ---- ---------------
------ -------- ---- -------------
----- -------- - -----------------
-------- --------------
---
----- ----- - ----------------------
----- --- ------- --------- -
-------- -
------ -
--------- --------------
-----
------- ----------- -- ---------------- ----- ------------- -------- ---------------
--------- --
------
-----------
--
-
-
------ ------- ----总结
redux-dialog 是一个非常实用的对话框组件，通过将对话框的状态管理放在 Redux Store 中，方便了对话框的状态监控和统一管理。在实际项目中，可以根据实际需要，对 redux-dialog 进行二次开发，实现更复杂的对话框，如弹出确认框、输入框等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8bab