2

我有一个 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);

但如果可能的话，我更愿意将它们留在它们的命名空间中。请注意，这类似于在 StackOverflow 上提出的这个问题

4

1 回答 1

2

这现在在 ReactJS 中得到支持，因为这个添加这个特性的拉取请求已经被合并了。

于 2014-05-23T00:16:59.733 回答