React.js:是否可以在使用JSX引用它们的同时命名子组件？

所以假设我有一个被调用的组件ImageGrid,它的定义如下:

window.ImageGrid = React.createClass({
    render: function() {
        return (
            

                
            
        );
    }
});

正如你所看到的,它包含了一个名为的反应组件ImageGridItem.其定义如下.

window.ImageGridItem = React.createClass({
    render: function() {
        return (
            
something
        );
    }
});

只要两者都是直接属性,这样就可以正常工作window.但这有点可怕,所以我想把我所有的反应组件分组到window.myComponents例如命名空间下.

所以定义改为:

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

现在的问题是,在它的render()函数中ImageGrid引用,它的JS版本被编译到JS ImageGridItem(),当然这是未定义的,因为它现在实际上myComponents.ImageGridItem()并且反应抱怨它无法找到它.

是的我知道我不能为那个组件编写JSX并手动执行myComponents.ImageGridItem({attr: 'val'})但是我更喜欢使用JSX html语法快捷方式,因为它更容易阅读和开发.

有什么方法可以让这个仍然使用儿童的语法吗？如果没有,是否可以在JSX中定义JS命名空间？