ReactJS and RequireJS & # 8594; How to use multiple classes returned from one module?

Question

I have a RequireJS module that returns several ReactJS classes that I would like to get immediately in the JSX area.

eg.

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

I would like to use them in React / JSX, like so (pseudocode):

 define(["require","jsx!app/my_classes"], function (require, MyClasses) { React.renderComponent( <div> <MyClasses.SimpleClass name="Test" /> <MyClasses.AnotherSimpleClass name="John" /> </div> , this.el); }); 

when I do this, React cannot find my module classes. It only works if I expand the classes in scope, that is:

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

How can i do this? I know that I can retrieve them in the current scope one by one or retrieve them in the global scope, but it looks like I can use them from JSX without changes. Thanks!

Please note that I know that I can just expose them to the global scope with this function:

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

but I would rather leave them in my namespaces, if possible. Please note that this is https://stackoverflow.com/a/312960/

Answer 1

This is now supported in ReactJS since this port request has been combined to add this feature.