动态插入的React组件

Question

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

Answer 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是列表，它将呈现该组件，并且数据将成为我的属性