javascript - 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的直接属性，此方法就可以正常工作。但这有点可怕，所以我想将所有我的React组件归类到window.myComponents命名空间下。

因此，定义更改为:

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

现在的问题是，由于ImageGrid在其render()函数中引用了<ImageGridItem />，因此该JS的JS版本已作为ImageGridItem()编译成JS，因为它现在实际上已经是myComponents.ImageGridItem()了，因此它抱怨说找不到它。

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

在仍然为 child 使用<ImageGridItem />语法的同时，有什么方法可以使它起作用？如果不是，是否可以在JSX中定义JS namespace ？

最佳答案

此合并请求刚刚合并:

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

它允许您在React 0.11和更高版本中编写诸如<myComponents.ImageGridItem />之类的东西。

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