动态生成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

我做过类似的事.

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