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({...});

现在的问题是，当ImageGrid在其render（）函数中引用<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

它允许您在React 0.11和更新版本中编写<myComponents.ImageGridItem />之类的内容。

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

Answer 2

目前，没有办法做到这一点。与JSX的命名空间在todo列表中。

大多数人使用某种模块系统（browserify，webpack，requirejs），它们取代了命名空间并允许轻松使用组件。还有很多其他好处，所以我非常推荐调查它。

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

2 个答案: