Javascript 动态插入的组件

我正在React/flux中构建一个WYSIWYG工具，您可以通过在页面上拖放元素来构建接口。例如，我有一个可拖放元素的列表：列表、表单、输入框、文本框等。当用户在页面上拖放其中一个元素时，我需要插入关联的react组件（并且我存储它们拖放的对象的name属性，这样我就知道我需要的组件名称）。因此，如果用户在页面上放置一个列表，并且我关联的组件标记是

，我不能只执行

，它会将其转换为

…但我需要一种执行方法。有什么想法吗

所以我摆弄了一下这个，最后让它像这样工作：

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

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

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

现在，如果我的component.componentName是list，它将呈现组件，数据将成为我的属性