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

Answer 2

我无法让 Crob 的答案起作用（虽然我很欣赏散列 table 的想法），但它让我找到了解决方案 - 我只是跳过了 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} )
    }
});

动态生成 React 组件名称

Dynamically generate React component names

coffeescript

reactjs