JSX スコープですぐに利用できるようにしたい複数の ReactJS クラスを返す RequireJS モジュールがあります。
例えば
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);
});
これどうやってするの?それらを現在のスコープに1つずつ抽出するか、グローバルスコープに抽出できることはわかっていますが、JSXから変更せずに使用できるはずです。ありがとう!
次のような関数を使用して、それらをグローバルスコープに公開できることを知っていることに注意してください。
function exposeClasses(obj){
for (var prop in obj)
{
window[prop] = obj[prop];
}
}
exposeClasses(MyClasses);
可能であれば、名前空間に残しておきたいと思います。これは、StackOverflowでここで尋ねられているこの質問に似ていることに注意してください