reactjs - 如何在 React 中声明全局变量？

Question

我在组件(应用程序中加载的第一个组件)中初始化了一次 i18n 翻译对象。所有其他组件都需要相同的对象。我不想在每个组件中重新初始化它。周围的路怎么样？使其可用于窗口范围并没有帮助，因为我需要在 render() 方法中使用它。

请针对这些问题提出通用解决方案，而不是 i18n 特定解决方案。

Answer 1

超越 React

您可能不知道导入已经是全局的。如果导出一个对象(单例)，那么它可以作为导入语句全局访问，并且它也可以全局修改。

如果您想全局初始化某些内容，但确保只修改一次，您可以使用这种单例方法，它最初具有可修改的属性，但随后您可以使用Object.freeze首次使用后确保其在初始化场景中不可变。

const myInitObject = {}
export default myInitObject

然后在引用它的 init 方法中:

import myInitObject from './myInitObject'
myInitObject.someProp = 'i am about to get cold'
Object.freeze(myInitObject)

myInitObject 仍然是全局的，因为它可以在任何地方作为导入引用，但如果有人尝试修改它，它将保持卡住状态并抛出异常。

使用单例的 react 状态示例

https://codesandbox.io/s/adoring-architecture-ru3vt(参见 UserContext.tsx)

如果使用react-create-app

(我实际上在寻找什么)在这种情况下，您还可以在引用环境变量时干净地初始化全局对象。

在项目的根目录创建一个 .env 文件，其中包含前缀 REACT_APP_ 变量，效果非常好。您可以根据需要在 JS 和 JSX process.env.REACT_APP_SOME_VAR 中引用，并且它在设计上是不可变的。

这避免了在 HTML 中设置 window.myVar = %REACT_APP_MY_VAR%。

直接从 Facebook 查看更多有用的详细信息:

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables