尝试根据随数据传递的参数来呈现不同的组件。如果我使用常规或React.createElement(Item)-可以正常工作,但所有其他选项均失败。
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') );
如何为不同类型的组件管理这种情况?
这应该工作:
var component = Components[itemData['itemClass']]); return React.createElement(component, { data: itemData, key: itemData['id'] });
您不能使用像这样的JSX语法,<component .../>因为当它被编译component时不会引用任何东西。
<component .../>
component
更新:这是完整的更新的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> ); } });
您可以看到它在此提琴中起作用:http : //jsfiddle.net/fmhhtk5o/3/