React Redux 附加组件

Question

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

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

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

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

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

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

非常感谢。

Answer 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 时，它会从上面的映射中提取相应的组件并渲染它。