简介
redux-dialog-extended 是一个可以让你很方便地在 React 应用中集成对话框功能的 npm 包。它包含了一些常见的对话框类型，比如确认框和输入框，并支持自定义对话框内容和样式。
安装
在 React 项目中，你可以使用 npm 或者 yarn 安装 redux-dialog-extended：
npm install --save redux-dialog-extended // 或者 yarn add redux-dialog-extended
使用示例
首先，在你的 React 应用的根组件中，你需要使用 provider 把你的 Redux store 包装一下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ ----------- ---- -------------
----- ----- - -------------------------
----- --- - -- -- -
--------- --------------
--- --------- ---
-----------
-
------ ------- ----然后，在你的应用组件中，你需要导入 Dialog 和 connectDialog 组件，以及相关的 Redux action 和 reducer：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------- -------------- ---------- - ---- ------------------------
------ - ------- - ---- ------------------------------------
----- --- ------- --------------- -
-------- -
------ -
-----
------- ----------- -- -----------------------------
------ --------
-------- ---------------
---------- -- -- -
-- ----------
-
----------------
--- ------- ---
------
--
-
-
----- --------------- - ----- -- -- -------- ------------- ---
----- ------------ - ---------------------------------------------
------ ------- -------------在这个示例中，我们定义了一个 App 组件，里面有一个按钮，点击之后会打开一个确认框询问用户是否确认删除条目。confirm 是 redux-dialog-extended 提供的一个 action，它会自动弹出一个确认框。
注意到我们把 App 组件先用 connect 包装一下，然后再用 connectDialog 包装一下。这是因为 connectDialog 会在 App 组件中注入一个 dialogs prop，它包含了当前打开的所有对话框的状态。这是用于渲染对话框的。请确保 connectDialog 在最外层包装。
自定义对话框
如果你想自定义一个对话框，并将它集成到 redux-dialog-extended 中，可以按照以下步骤操作：
定义一个新的对话框组件。它需要接受以下 props：
title：对话框标题message：对话框信息buttons：对话框按钮，一个数组onClose：对话框关闭时的回调函数
示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ------------ - -- ------ -------- -------- ------- -- -- - ----- ---------------- ---------------- --------------------- ------ -- - ------- ----------- ----------- -- - --------------- -- ---------------- - ----------------- - -------------------------- --- ------ -- ------ ------- -------------在你的 Redux reducer 中定义一个对话框类型。这个类型的结构和默认对话框的结构一样，包括
title、message、buttons等字段，但是你可以在buttons中为每个按钮自定义一个onClick回调函数。示例代码：
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ - ------------- - ---- ------------------------ ------ ------------ ---- ----------------- ----- ----------- - ----------------- -------- --------------- ------- - ---------- ------------- -------- - - ------ ----- -------- -- -- - ------------------ - -- - ------ ----- -------- -- -- - ------------------ - - - - -- -- -- ------- --- ------ ------- ------------在应用中调用
openDialogaction 来打开这个自定义对话框。在openDialog的payload参数中，你需要指定对话框的类型，也就是在 Redux reducer 中定义的类型名称。示例代码：
-- -------------------- ---- ------- ------ - ---------- - ---- ------------------------ ----- --- ------- --------------- - -------- - ------ - ----- ------- ----------- -- ---------------------------------------- - ------ --------- -------- -------------- ---------------------- --- ------- --- ------ -- - -
结论
redux-dialog-extended 是一个很方便的 npm 包，可以帮助我们在 React 应用中集成对话框功能。它提供了多种类型的默认对话框，并支持自定义对话框内容和样式。如果你需要在你的 React 应用中使用对话框，不妨试试 redux-dialog-extended。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d6a81e8991b448db2e5