Question

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

e.g。

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已合并。

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

1 个答案: