React Redux附加组件

Question

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

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

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

我正在寻求的建议是，如何使用React / Redux，将完整组件附加到主区域？

我假设我派遣动作/减速器引用一个组件，但是如何实际添加和跟踪附加到主区域的组件？使用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时，它将从上面的映射中提取相应的组件并进行渲染。