ReactJS 和 RequireJS -> 如何使用从一个模块返回的多个类？

Question

我有一个 RequireJS 模块，它返回多个 ReactJS 类，我希望这些类立即可用于 JSX 范围。

例如

define(["require"], function (require) {

  var SimpleClass = React.createClass({displayName: 'SimpleClass',
    render: function() {
      return <div>HELLO DUDE {this.props.name}</div>;
    }
  });
  var AnotherSimpleClass = React.createClass({displayName: 'AnotherSimpleClass',
    render: function() {
      return <div>SUPER DUDE {this.props.name}</div>;
    }
  });


  var result = 
  {
    AnotherSimpleClass: AnotherSimpleClass,
    SimpleClass: SimpleClass
  };

  return result;
});

我希望能够像这样在 React/JSX 中使用这些（伪代码）：

define(["require","jsx!app/my_classes"], function (require, MyClasses) {

  React.renderComponent(
    <div>
      <MyClasses.SimpleClass name="Test" />
      <MyClasses.AnotherSimpleClass name="John" />
    </div>
  , this.el);

});

当我这样做时，React 无法找到我的模块类。它仅在我将类公开到范围时才有效，即：

define(["require","jsx!app/my_classes"], function (require, MyClasses) {

  var SimpleClass = MyClasses.SimpleClass;
  var AnotherSimpleClass = MyClasses.AnotherSimpleClass;

  React.renderComponent(
    <div>
      <SimpleClass name="Test" />
      <AnotherSimpleClass name="John" />
    </div>
  , this.el);

});

我该怎么做？我知道我可以将它们一一提取到当前范围，或者将它们提取到全局范围，但似乎我应该能够在不修改的情况下从 JSX 中使用它们。谢谢！

请注意，我知道我可以使用如下函数将它们公开到全局范围：

  function exposeClasses(obj){
    for (var prop in obj)
    {
      window[prop] = obj[prop];
    }
  }

  exposeClasses(MyClasses);

但如果可能的话，我更愿意将它们留在它们的命名空间中。注意这里是similar to this question being asked here on StackOverflow

Answer 1

ReactJS 现在支持此功能，因为添加此功能的 this pull request 已合并。