React Redux 附加组件

Posted 2023-02-22

【中文标题】React Redux 附加组件

【英文标题】：React Redux append components

【发布时间】：2016-09-11 06:48:19

【问题描述】：

我有一个我正在工作的项目，它是一个 html 页面构建器。用户可以从菜单中从预先设计的 HTML 页面部分（页眉、滑块、内容块、页脚等）列表中进行选择，然后将它们拖放到画布上以构建网页。最终结果是一个包含静态网站的可下载 zip 文件。

到目前为止，我的应用程序布局如下所示：

我已经涵盖了第 1,2 和 3 部分。第 4 部分，滑出式抽屉，包含 HTML 部分，单击时我想将相应的组件附加到页面的主要区域，此过程将重复，直到网页构建完成。然后可以编辑每个组件并最终保存为一个页面。

我正在寻找关于如何使用 React/Redux 将完整组件附加到主区域 onclick 的建议？

我假设我调度动作/reducer 引用一个组件，但我如何实际添加和跟踪附加到主区域的组件？使用 jQuery 这将是一个简单的 jQuery .load() 但在 React/Redux 我不知道，也许我可以使用 React Router 使用一个技巧？

谁能帮我指出正确的方向？进一步阅读等。

非常感谢。

【参考方案1】：

简单地说，您将希望将某种类型的 ID 映射到每个组件，然后将这些 ID 存储在商店中，例如 mainArea = [id1, id6, id12] 等。然后您的 <MainArea /> 组件只需迭代道具并引用您建立的映射到加载正确的组件。

编辑：阐明如何利用组件图。

这大致就是您要查找的内容。假设上面的 id 是我们的组件。在我们的代码库中的某个地方，我们会将这些 id 映射到组件：

const Component1 = React.createClass(...)
const Component6 = React.createClass(...)
const Component12 = React.createClass(...)

const componentMap = 
  id1: Component1,
  id6: Component6,
  id12: Component12,

然后，当您的 <MainArea /> 组件遍历它存储的 id 时，它会从上面的映射中提取相应的组件并渲染它。

【讨论】：

感谢您的回复，非常感谢。创建地图是有道理的，我想了解我如何使用动作/减速器来实现这一点，但你能否进一步解释我将如何将组件加载到 <MainArea /> 我正在为将整个组件加载到另一个组件的概念而苦苦挣扎。

好的，我想我明白了。我会试一试。再次感谢布莱恩的解释。