Javascript 动态创建反应组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31234500/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create react component dynamically
提问by Dmytro
Trying to render different components depending on arguments passed with data. If I use regular or React.createElement(Item) - it works fine, but all other options fail.
尝试根据随数据传递的参数呈现不同的组件。如果我使用常规或 React.createElement(Item) - 它工作正常，但所有其他选项都失败。
http://jsfiddle.net/zeen/fmhhtk5o/1/
http://jsfiddle.net/zeen/fmhhtk5o/1/
var React = window.React;
var data = {items: [
{ itemClass: 'Item', id: 1, contentsHTML: '', text: 'Item 1'},
{ itemClass: 'Item', id: 2, contentsHTML: '', text: 'Item 2'},
{ itemClass: 'Item', id: 3, contentsHTML: '', text: 'Item 3'},
{ itemClass: 'Item', id: 4, contentsHTML: '', text: 'Item 4'},
{ itemClass: 'Item', id: 5, contentsHTML: '', text: 'Item 5'}
]};
var MyCatalog = React.createClass({
getInitialState: function() {
return { data: { items: [] } };
},
componentDidMount: function () {
this.setState({ data: this.props.data });
},
render: function () {
return (
<div className="catalog">
HELLO!!! I AM A CATALOG!!!
<ItemList data={this.state.data}/>
</div>
);
}
});
var ItemList = React.createClass({
render: function () {
console.log(this.props);
var items = this.props.data["items"].map(function (itemData) {
var klass = itemData['itemClass'] || 'Item';
var ItemFactory = React.createFactory(klass);
//return <ItemFactory key={itemData['id']} data={itemData}/> // no
//return <klass key={itemData['id']} data={itemData}/> // no
//return React.createElement(klass, { key: itemData['id'], data: itemData }); // no
//return <Item data={itemData}/> // ok
//return React.createElement(Item, { data: itemData }); // ok
//return React.createElement('Item', { key: itemData['id'], data: itemData }); // no
//return React.createElement(React.createFactory('Item'), { data: itemData }); // no, error
var component = Components['itemClass'];
return <component data={itemData} key={itemData['id']}/>
});
console.log(items);
return (
React.createElement('div', { className: 'list' },
React.createElement('div', null, 'And I am an ItemList :'),
React.createElement('div', null, items)
)
/*<div className="list">
<div>And I am an ItemList :</div>
<div>
{items}
</div>
</div>*/
);
}
});
var Item = window.Item = React.createClass({
render: function () {
return (
<div className="item">
<div>
Regular item. Nothing special.
</div>
{this.props.children}
</div>
);
}
});
var Components = { 'Item': Item };
React.render(
<MyCatalog data={data}/>,
document.getElementById('app')
);
How can I manage this case for different types of components?
如何为不同类型的组件管理此案例？
回答by rojoca
This should work:
这应该有效：
var component = Components[itemData['itemClass']]);
return React.createElement(component, {
data: itemData,
key: itemData['id']
});
You can't use JSX syntax like this <component .../>because when it gets transpiled componentwon't refer to anything.
你不能像这样使用 JSX 语法，<component .../>因为当它被转译component时不会引用任何东西。
UPDATE: Here is the updated ItemList component in full:
更新：这是更新后的 ItemList 组件：
var ItemList = React.createClass({
render: function() {
console.log(this.props);
var items = this.props.data["items"].map(function(itemData) {
var component = Components[itemData['itemClass']];
return React.createElement(component, {
data: itemData,
key: itemData['id']
});
});
console.log(items);
return (
<div className="list">
<div>And I am an ItemList</div>
<div>{items}</div>
</div>
);
}
});
You can see it working in this fiddle: http://jsfiddle.net/fmhhtk5o/3/
你可以看到它在这个小提琴中工作：http: //jsfiddle.net/fmhhtk5o/3/
