假设我有一个名为 ImageGrid 的组件定义如下:

window.ImageGrid = React.createClass({
    render: function() {
        return (
            <div className="image-grid">
                <ImageGridItem />
            </div>
        );
    }
});

如您所见，它包含一个名为 ImageGridItem 的子 React 组件。 .其定义如下。

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指<ImageGridItem />在它的 render() 函数中，它的 JS 版本被编译成 JS 为 ImageGridItem()这当然是未定义的，因为它现在实际上是 myComponents.ImageGridItem()并且 react 提示它找不到它。

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

有什么方法可以在仍然使用 <ImageGridItem /> 的同时让它工作吗？ child 语法？如果不能，是否可以在 JSX 中定义 JS 命名空间？

最佳答案

这个拉取请求刚刚合并:

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

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

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

关于javascript - react .js : Is it possible to namespace child components while still using JSX to refer to them?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23653616/