4

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

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

应用线框

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

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

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

谁能帮我指出正确的方向？延伸阅读等

提前谢谢了。

4

1 回答 1

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

于 2016-05-15T12:27:52.477 回答