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

但如果可能的话，我更愿意将它们保留在 namespace 中。请注意，这是 similar to this question being asked here on StackOverflow

Answer 1

ReactJS 现在支持此功能，如 this pull request添加此功能已被合并。