动态生成React组件名称

Question

我无法找到此解决方案。我如何将下面的代码转换为更加动态和简洁的内容？

OneComponent = require ('./OneComponent') 
TwoComponent = require ('./TwoComponent') 
ThreeComponent = require ('./ThreeComponent') 

Example = React.createClass 

    render: -> 
    filter = @props.filterState 

    if filter is 'something' 
     tableCmpt = 
     <div> 
      <OneComponent 
      tasks={@props.tasks} 
      /> 
     </div> 

    if filter is 'somethingElse' 
     tableCmpt = 
     <div> 
      <TwoComponent 
      tasks={@props.tasks} 
      /> 
     </div> 

    ##... etc 

    return tableCmpt 

Answer 1

我不能让Crob的回答工作（虽然我很欣赏的哈希表的想法），但它使我找到一个解决办法 - 我只是跳过了JSX步骤和所使用的编译JS：

React.createElement(component, {tasks: this.props.tasks}) 

因此，所有的一切：

var Components = { 
    'something': require('./Component'), 
    'somethingElese': require('./Component2') 
}; 

Example = React.createClass({ 
    render: function() { 
     var component = Components[this.props.filter]; 
     React.createElement(component, {tasks: this.props.tasks}) 
    } 
}); 

Answer 2

我做了这样的事情。

var Components = { 
    'something': require('./Component'), 
    'somethingElese': require('./Component2') 
}; 

Example = React.createClass({ 
    render: function() { 
     var component = Components[this.props.filter]; 
     return <div><component tasks={this.props.tasks}/></div>; 
    } 
});