JS：React 和全局命名空间污染

Posted 2023-02-21

【中文标题】JS：React 和全局命名空间污染

【英文标题】：JS: React and global namespace pollution

【发布时间】：2014-04-25 07:59:26

【问题描述】：

我正在考虑在一个新网站中使用 react，但我仍然想知道如何使用 react 组件处理全局命名空间。例如，如果我这样定义几个 React 组件：

var MySlider = React.createClass( // snip );
var MyAlert = React.createClass( // snip );
var MyDropdown = React.createClass( // snip );

渲染组件如下所示：

React.renderComponent(
    <MySlider />,
    document.getElementById('content')
);

但是，我更喜欢命名我的组件以避免污染全局命名空间。

var Namespace = ;
Namespace.MySlider = React.createClass( // snip );

在渲染时，我猜是因为命名空间的原因找不到组件。

React.renderComponent(
    <Namespace.MySlider />, // component is not found
    document.getElementById('content')
);

我在这里缺少什么？忽略全局命名空间污染？或者是否有可能为您的组件命名？

谢谢！

【问题讨论】：

目前该语法不起作用，但将来可能。 ssorallen 的回答是正确的；推荐使用模块系统。

正如@BenAlpert 之前提到的，JSX namespacing 是在 React 0.11.0 中添加的。仍然建议使用模块加载器，但您现在可以像在示例中希望的那样使用命名空间。

【参考方案1】：

这不完全是一个 React JS 问题，因为任何大型 javascript 代码库都必须处理模块加载。我建议放弃 JavaScript 中的命名空间，就像您开始使用它的方式一样，而是使用模块加载器。

您会对此有很多意见，但请查看一些广泛使用的模块加载器：

Browserify rollup.js Webpack

【讨论】：

感谢您的解释！我一定会看看的。

【参考方案2】：

此代码有效。

React.renderComponent(
    Namespace.MySlider(),
    document.getElementById('content')
);

请参阅documentation 了解更多信息。