动态插入React组件

时间:2015-01-22 19:35:51

标签: javascript reactjs reactjs-flux

我正在React / flux中构建一个WYSIWYG工具,您可以通过将元素拖放到页面上来构建接口。例如,我有一个可放置元素的列表:列表,表单,输入框,文本框等。当用户在页面上删除其中一个元素时,我需要插入关联的反应组件(我存储一个名称)它们丢弃的对象的属性,所以我将知道我需要的组件名称)。因此,如果用户将列表删除到页面上,并且我的关联组件标记为<list />,则我不能只执行<{component.name} />并将其转换为<list /> ...但是我需要一种方法。有什么想法吗?

1 个答案:

答案 0 :(得分:2)

所以摆弄这个,我最终让它像这样工作:

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,它将呈现组件,数据将成为我的属性