简介
react-redux-subdivide是一个用于在React应用程序中创建可重新排列、可调整尺寸的面板布局的npm包。它是带有Redux支持的。它基于demo app。
安装
要使用react-redux-subdivide，您需要先确保已安装React和Redux。然后，在您的项目根目录中运行以下命令：
--- ------- ---------------------
使用
要使用react-redux-subdivide，您需要创建一个SubdivideLayout组件并将其用作您的应用程序的根组件。首先，在您的src/index.js文件中，您需要以下导入语句：
------ ----- ---- ------- ------ -------- ---- ----------- ------ - -------- - ---- ------------- ------ - ----------- - ---- ------- ------ - ---------------- - ---- ----------------------- ------ --------------- ---- -------------------------------------------
现在，您可以创建一个简单的Redux存储，并将其与SubdivideLayout组件包装在Provider中，如下所示：
----- ----- - -----------------------------
----------------
--------- --------------
---------------- --
------------
-------------------------------
-现在，您就可以开始添加Subdivide组件了。要添加一个面板，您需要指定一个唯一的id，一个width和一个height，如下所示：
------ --------- ---- ------------------------------------- ---------- ------ ----------- ------------- ---- -------- ---------------- --------- -------- ------- ------------
面板的id将用于创建关于其位置和大小的状态。您可以为每个面板指定一个字符串标识符。width和height应指定为一个字符串，例如50%，而不是一个数字，例如0.5。
Subdivide组件旨在容纳任何内容。例如，您可以将组件作为面板传递，就像这样：
---------- ------ ----------- -------------
---------- ------ ----------- -------------
---------- ---------
------------
------------现在，由于Subdivide组件是React组件，因此您可以在内部自由添加其余任何内容或组件。
深入
react-redux-subdivide使用Redux store来管理组件的位置和大小。这意味着您可以轻松地更改组件的状态。例如，您可能会希望在单击某个按钮时将面板拆分为两个子面板。要执行此操作，您可以像这样提交Redux操作：
------ - -------- - ---- ----------------------- ------------------------ --------- --------------
addPanel是Redux操作的动作创建器。newId是新面板的ID。您可以使用uuid来分配唯一的标识符。parentId是父面板的ID，您希望将新面板添加到父面板中。'horizontal'是方向，您希望新面板是水平的还是垂直的。
您可以执行其他操作，例如将面板合并为单个面板或更新某个面板的大小和位置。有关更多详细信息，请查看Redux操作和api文档。
示例代码
完整的示例代码如下所示：
------ ----- ---- -------
------ -------- ---- -----------
------ - -------- - ---- -------------
------ - ----------- - ---- -------
------ - ----------------- -------- - ---- -----------------------
------ --------------- ---- -------------------------------------------
------ --------- ---- -------------------------------------
----- ----- - -----------------------------
----- ----- - ---
----- -------- - ---
------------------------------ --------- --------------
----------------
--------- --------------
-----------------
---------- ------ ---------------------- ----------- -------------
---------- ------ -------------------- ----------- -------------
---- -------- ---------------- --------- -------- ---------
---------- ------ ----------- -------------
---------- ---------
------------
------------
---------- ---------- ----------- -------------
---- -------- ---------------- --------- -------- ---------
------------
------------
------------------
------------
-------------------------------
-在此示例中，我们使用了addPanel操作来添加一个新的水平面板，并在第一个面板的右侧添加了一个面板。要更改此示例以测试不同的操作，请参考Redux操作示例。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fe981e8991b448dd95f