React.js：是否可以为子组件命名空间，同时仍然使用 JSX 来引用它们？

假设我有一个名为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。但这有点可怕，所以我想将所有反应组件分组在以下名称空间下window.myComponents例如。

因此定义更改为：

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

现在的问题是，作为ImageGrid指的是<ImageGridItem />在它的 render() 函数中，JS 版本被编译为 JSImageGridItem()这当然是未定义的，因为它现在实际上是myComponents.ImageGridItem()并反应抱怨它找不到它。

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

有什么方法可以让它在仍然使用的情况下工作<ImageGridItem />儿童语法？如果没有，是否可以在 JSX 中定义 JS 命名空间？

这个拉取请求刚刚合并：

https://github.com/facebook/react/pull/760 https://github.com/facebook/react/pull/760

它允许你写类似的东西<myComponents.ImageGridItem />在 React 0.11 及更高版本中。

也就是说，适当的模块系统是管理依赖项的推荐方法，以避免拉入不需要的代码。