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

Question

所以假设我有一个被调用的组件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({...});

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

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

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

Answer 1

这个拉取请求刚刚合并:

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

它允许你编写像<myComponents.ImageGridItem />React 0.11和更新版本的东西.

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