动态生成 React 组件名称答案

【问题标题】：Dynamically generate React component names动态生成 React 组件名称
【发布时间】：2015-07-26 14:25:11
【问题描述】：

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

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

【问题讨论】：

标签： coffeescript reactjs

【解决方案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>;
    }
});

【讨论】：

感谢@Crob，但这似乎对我不起作用。有什么想法吗？我注销了component var，它似乎很好地抓取了组件，但它没有实例化组件

【解决方案2】：

我无法得到 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} )
    }
});

【讨论】：