8

所以假设我有一个名为的组件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 命名空间？

4

2 回答 2

9

这个拉取请求刚刚合并：

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

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

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

于 2014-05-14T16:43:39.277 回答
2

目前，没有办法做到这一点。使用 JSX 的命名空间在待办事项列表中。

大多数人使用某种模块系统（browserify、webpack、requirejs），它们取代了命名空间并允许组件轻松使用。还有很多其他的好处，所以我非常建议研究一下。

于 2014-05-14T12:05:30.000 回答