假设我有一个名为的组件ImageGrid，它的定义如下：

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

如您所见，它包含一个名为的子反应组件ImageGridItem。定义如下。

window.ImageGridItem = React.createClass({
    render: function() {
        return (
            <div className="item-container">something</div>
        );
    }
});

只要两者都是的直接属性，此方法就可以正常工作window。但这太可怕了，所以我想将我所有的React组件归类window.myComponents为一个命名空间。

因此，定义更改为：

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

现在的问题是，正如在render（）函数中ImageGrid所指的<ImageGridItem />那样，此版本的JS版本被编译为JS，ImageGridItem()因为它现在实际上是未定义的，因为它现在实际上已经myComponents.ImageGridItem()反应了，并抱怨它找不到它。

是的，我意识到我无法为该组件包含和手动编写JSX，myComponents.ImageGridItem({attr: 'val'})但是我真的更喜欢使用JSX html语法快捷方式，因为它更易于阅读和开发。

有什么方法可以在仍然<ImageGridItem />为孩子使用语法的同时使其工作？如果不是，是否可以在JSX中定义JS名称空间？