假设我有一个组件被调用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()并且react抱怨它找不到它。

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

是否有任何方法可以在仍然使用<ImageGridItem />儿童语法的同时使其工作？如果不是，是否可以在 JSX 中定义 JS 命名空间？