Dynamiczne tworzenie komponentów reaguje
Próba renderowania różnych komponentów w zależności od argumentów przekazanych z danymi.
Jeśli używam normal lub React.createElement (Item) - działa dobrze, ale wszystkie inne opcje zawodzą.
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}/>
);
}
});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>
{items}
*/
);
}
});var Item = window.Item = React.createClass({
render: function () {
return ( <div className="item">
<div>
Regular item. Nothing special.
{this.props.children}
);
}
}); var Components = { 'Item': Item }; React.render(
<MyCatalog data={data}/>,
document.getElementById('app')
);Jak mogę zarządzać tym przypadkiem dla różnych typów komponentów?
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
1 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
Nie możesz używać składni JSX, takiej jak ten, ponieważ po transpilowaniunie będzie do niczego odnosić się.
AKTUALIZACJA: oto zaktualizowany składnik ItemList w całości:
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>{items}
);
}
});
Możesz zobaczyć, jak to działa na tych skrzypcach:
http://jsfiddle.net/fmhhtk5o/3
http://jsfiddle.net/fmhhtk5o/3/
/