React Redux 追加组件

Question

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

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

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

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

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

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

非常感谢。

Answer 1

松散地，您需要将某种类型的 ID 映射到每个组件，然后将这些 ID 存储在商店中，例如 mainArea = [id1, id6, id12] 等。然后您的 <MainArea /> 组件简单地遍历 props并参考您建立的地图以加载正确的组件。

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

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

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

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

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

React Redux 追加组件

React Redux append components

javascript

reactjs

redux

redux-thunk