Tạo thành phần phản ứng động

Question

Cố gắng hiển thị các thành phần khác nhau tùy thuộc vào đối số được truyền với dữ liệu. Nếu tôi sử dụng Regular hoặc React.createElement (Item) - nó hoạt động tốt, nhưng tất cả các tùy chọn khác đều thất bại.

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') 
     ); 

Làm thế nào tôi có thể quản lý trường hợp này với nhiều loại khác nhau của các thành phần?

Answer 1

này nên làm việc:

var component = Components[itemData['itemClass']]); 
return React.createElement(component, { 
    data: itemData, 
    key: itemData['id'] 
}); 

Bạn không thể sử dụng JSX cú pháp như <component .../> này bởi vì khi nó được transpiled component sẽ không đề cập đến bất cứ điều gì.

UPDATE: Đây là thành phần ItemList được cập nhật đầy đủ:

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> 
     ); 
    } 
}); 

Bạn có thể nhìn thấy nó làm việc trong fiddle này: http://jsfiddle.net/fmhhtk5o/3/