javascript - 使用requirejs加载具有父子关系的React组件

我正在使用React / Flux开发高度可插入的UI，并使用RequireJS加载模块。

我无法解决这个问题，可能是由于我对RequireJS的了解不足。还有另一层间接，但是问题的根源是：

我在具有以下渲染功能的模块中具有React组件A：

render: function() {

<div>
    <Component B />
</div>
}

和组件B，在一个单独的模块中将很简单：

render: function() {

    <div> Some Text </div>
}

在我与requirejs一起学习的顶层模块中，我可以像这样获得componentA：

require(['ComponentA'], function(ComponentA) {
    React.render(React.createElement(ComponentA,document.getElementById('main'));

});

效果很好，直到我尝试在ComponentA的呈现功能中使用ComponentB为止... componentA自然不知道ComponentB是什么，但是我不确定正确的方法或在componentA尝试呈现之前如何要求ComponentB。

注意：我预先将所有JSX转换为纯JS，因此这不是一个因素。

有小费吗？

最佳答案

听起来您的模块不是定义-http://requirejs.org/docs/api.html#defdep

使用定义，ComponentA绝对可以获取对ComponentB的引用，最简单的示例是这样的：

组件A-具有依赖项-http://requirejs.org/docs/api.html#defdep

define(['path/to/ComponentB'], function (ComponentB) {
    return React.createClass( {
        render: function () {
            <div>
                <ComponentB />
            </div>
        }
    });
});

ComponentB-无依赖性-http://requirejs.org/docs/api.html#deffunc

define(function () {
    return React.createClass( {
        render: function () {
            <div>
                Some Text
            </div>
        }
    });
});

然后，您可以按照问题中的说明在顶层渲染ComponentA，并且ComponentA将包含一个ComponentB。