React Redux附加组件

时间:2016-05-15 11:24:01

标签: javascript reactjs redux redux-thunk

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

到目前为止,我的应用程序布局如下:

Application wireframe

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

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

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

任何人都可以帮我指出正确的方向吗?进一步阅读等。

非常感谢提前。

1 个答案:

答案 0 :(得分:2)

很容易,您需要将某种类型的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时,它将从上面的映射中提取相应的组件并进行渲染。