Javascript React.js：在仍然使用JSX引用子组件时，是否可以为其命名名称空间？

假设我有一个名为

ImageGrid

的组件，它的定义如下：

window.ImageGrid = React.createClass({
    render: function() {
        return (
            <div className="image-grid">
                <ImageGridItem />
            </div>
        );
    }
});

只要这两个属性都是

窗口的直接属性

，就可以正常工作。但是这有点可怕，所以我想把我所有的react组件都放在

window.myComponents

的命名空间下

因此，定义变为：

window.myComponents.ImageGrid     = React.createClass({...});
window.myComponents.ImageGridItem = React.createClass({...});

现在的问题是，由于

ImageGrid

在其render（）函数中引用了

，因此它的JS版本被编译为

ImageGridItem（）

，当然它是未定义的，因为它现在实际上是

myComponents.ImageGridItem（）

，react抱怨它找不到它

是的，我意识到我不能为组件include编写JSX，也不能手动编写

myComponents.ImageGridItem（{attr:'val'}）

，但我更喜欢使用JSX html语法快捷方式，因为它更易于阅读和开发

---

有什么方法可以让它在仍然使用

语法的情况下工作呢？如果不能在JSX中定义JS名称空间，那么目前还没有办法做到这一点。带有JSX的名称空间在todo列表中

---

大多数人使用某种模块系统（browserify、webpack、requirejs），它们取代了名称空间，并允许轻松使用组件。还有很多其他好处，因此我非常推荐您研究一下。

此拉取请求刚刚合并：

它允许您在React 0.11及更高版本中编写类似于

的内容

---

也就是说，建议使用适当的模块系统来管理依赖关系，以避免引入不需要的代码。

但即使使用模块系统，如果一个模块返回多个react类，该怎么办？在这种情况下，您将如何引用每个单独的类？我在这里发布了一个关于这个问题的相关问题：最简单的方法是将每个类拆分为一个单独的模块。pull请求已经合并，因此如果您从主repo获得最新的消息，您会很好！

window.myComponents.ImageGrid     = React.createClass({...});
window.myComponents.ImageGridItem = React.createClass({...});