动态分量创建反应
根据传输给数据的参数，尝试渲染各种组件。
如果我使用通常或 React.createElement/Item/ - 它可以很好，但所有其他选项都失败了。
http://jsfiddle.net/zeen/fmhhtk5o/1/
/
如何为不同类型的组件管理这种情况？
</mycatalog></component></item></klass></itemfactory>
如果我使用通常或 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}/">
</itemlist></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 data="{itemData}/" key="{itemData['id']}"> // no
//return <klass data="{itemData}/" key="{itemData['id']}"> // 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'/
/;
如何为不同类型的组件管理这种情况？
</mycatalog></component></item></klass></itemfactory>
没有找到相关结果
已邀请:
1 个回复
石油百科
赞同来自:
您无法使用语法 JSX, 像这样
, 因为它在移植时，
不会提及任何内容。
UPDATE: 这是更新的组件 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>
/;
}
}/;
你可以看到它是如何工作的 fiddle:
http://jsfiddle.net/fmhhtk5o/3/
/