ReactJS 和 RequireJS -> 如何使用从一个module返回的多个类?

IT技术 javascript scope reactjs requirejs react-jsx
2021-05-24 02:32:21

我有一个 RequireJS module,它返回多个 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 找不到我的module类。它仅在我将类公开到范围时才有效,即:

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 上提出的这个问题

1个回答

现在 ReactJS 支持此功能,因为添加此功能的拉取请求已合并。