我i18n在一个组件（在 app 中加载的第一个组件）中初始化了一次翻译对象。在所有其他组件中都需要相同的对象。我不想在每个组件中重新初始化它。有什么办法？使其可用于窗口范围无济于事，因为我需要在render()方法中使用它。
请为这些问题提出一个通用的解决方案，而不是 i18n 特定的解决方案。
如何在 React 中声明一个全局变量？
IT技术
reactjs
javascript-globalize
2021-04-02 04:53:08
6个回答
超越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仍将是全球性的，因为它可以在任何地方引用为进口，但仍然保持冻结，并抛出，如果有人试图修改它。
我使用单例破解全局状态
https://codesandbox.io/s/react-typescript-playground-forked-h8rpu
如果使用 react-create-app
（我实际上在寻找什么）在这种情况下，您还可以在引用环境变量时干净地初始化全局对象。
在项目的根目录中创建一个带有前缀变量的.env文件REACT_APP_非常好。您可以process.env.REACT_APP_SOME_VAR根据需要在 JS 和 JSX 中进行引用，并且它在设计上是不可变的。
这避免了必须window.myVar = %REACT_APP_MY_VAR%在 HTML 中设置。
直接从 Facebook 查看更多有用的详细信息：
https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
为什么不尝试使用Context？
您可以在任何父组件中声明一个全局上下文变量，并且可以通过this.context.varname. 您只需要在父组件中指定childContextTypes和getChildContext，然后只需contextTypes在子组件中指定即可从任何组件使用/修改它。
但是，请注意文档中提到的这一点：
正如在编写清晰的代码时最好避免使用全局变量一样，在大多数情况下您应该避免使用上下文。特别是，在使用它来“保存输入”并使用它而不是传递显式props之前，请三思。
不推荐但是....您可以使用您的应用程序类中的 componentWillMount 通过它添加您的全局变量...有点像这样：
componentWillMount: function () {
window.MyVars = {
ajax: require('../helpers/ajax.jsx'),
utils: require('../helpers/utils.jsx')
};
}
仍然认为这是一个黑客......但它会完成你的工作
顺便说一句， componentWillMount 在渲染前执行一次，在此处查看更多信息：https : //reactjs.org/docs/react-component.html#mounting-componentwillmount
在 ./src 文件夹中创建一个名为“config.js”的文件，内容如下：
module.exports = global.config = {
i18n: {
welcome: {
en: "Welcome",
fa: "خوش آمدید"
}
// rest of your translation object
}
// other global config variables you wish
};
在你的主文件“index.js”中加入这一行：
import './config';
在任何需要对象的地方都使用这个：
global.config.i18n.welcome.en
可以在 webpack ie 中保留全局变量 webpack.config.js
externals: {
'config': JSON.stringify(GLOBAL_VARIABLE: "global var value")
}
在 js module中可以这样读
var config = require('config')
var GLOBAL_VARIABLE = config.GLOBAL_VARIABLE
希望这会有所帮助。