Динамически создавать компонент реакции

Попытка визуализации различных компонентов в зависимости от аргументов, передаваемых с данными. Если я использую обычный или 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') 
        );

Как я могу управлять этим случаем для разных типов компонентов?

Ответ 1