javascript - 动态插入的 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 是列表，它将渲染组件，数据将成为我的属性