动态插入的 React 组件答案

【问题标题】：Dynamically inserted React Components动态插入的 React 组件
【发布时间】：2015-03-21 17:48:38
【问题描述】：

我正在 React/flux 中构建一个所见即所得的工具，您可以在其中通过将元素拖放到页面上来构建界面。例如，我有一个可放置元素的列表：列表、表单、输入框、文本框等。当用户在页面上放置其中一个元素时，我需要插入相关的反应组件（并且我存储了一个名称他们丢弃的对象的属性，所以我会知道我需要的组件名称）。因此，如果用户将列表拖放到页面上，并且我的关联组件标签是<list />，我不能只做<{component.name} />，它会将它变成<list />...但是我需要一种这样做的方法.有什么想法吗？

【问题讨论】：

标签： javascript reactjs reactjs-flux

【解决方案1】：

如此摆弄，我最终让它像这样工作：

var Sort = require('./sort')
var List = require(./list')

var allComponents = {
    sort: Sort,
    list: List
}

React.createElement(allComponents[component.componentName], {data:component.data})

所以现在如果我的 component.componentName 是列表，它将渲染组件，数据将成为我的属性

【讨论】：