如何在 React JS 中声明全局变量

Question

我一直在网上搜索，包括堆栈溢出，如何在 JS React 中声明全局变量。

我有一个名为name的声明变量，我想在代码的两个不同部分中使用此变量。但是我在代码的某些部分中作为未定义的变量返回，即使我将其保留在所有函数之外，就像全局变量通常一样。

是否应该有一种特殊的方式来在 React 中声明全局变量？

我的 Js React 代码 - 这是我的代码的一个非常简单的示例，可以提供见解

/* I need this variable to be global so that 
* I can you it inside "DataAreaOne" and "DataAreaTwo" 
*/
var name = 'empty'; 
/*************************FIRST PART***************/
var DataAreaOne = _react2.default.createClass({
displayName: 'DataAreaOne',
render: function render() {
if(name != "something"){
// change name to something else
name = "something else";
return _react2.default.createElement(
'div',
{ className: 'container-for-stats' },
_react2.default.createElement(
'div',
{ className: 'name-for-stats' },
'some data goes here'
) 
);
}  
}
});
/*************************SECOND PART***************/
var DataAreaTwo = _react2.default.createClass({
displayName: 'DataAreaTwo',
render: function render() {
if(name == "something else"){
return _react2.default.createElement(
'div',
{ className: 'container-for-stats' },
_react2.default.createElement(
'div',
{ className: 'name-for-stats' },
'some data goes here'
) 
);
}else{
alert('nothing found');
}  
}
});

Answer 1

React Native 中的全局范围是变量全局的。例如：作为global.foo = foo，那么你可以在任何地方使用global.foo作为全局变量。

全局作用域可用于存储全局配置或类似的东西。在不同的视图之间共享变量，正如你的描述，你可以选择许多其他解决方案(使用redux，flux或将它们存储在更高的组件中)，全局范围不是一个好的选择。

定义全局变量的一个好做法是使用 js 文件。例如全局.js

global.foo = foo;
global.bar = bar;

然后，确保在项目初始化时执行它。例如，在 index.js 中导入文件：

import './global.js'
// other code

Answer 2

看看 react 上下文 ：

https://reactjs.org/docs/context.html

简单的例子：

const ThemeContext = React.createContext('name');

如果您使用的是 React 16.2 及更低版本，请使用此旧版 React 上下文：

https://reactjs.org/docs/legacy-context.html

您可以在任何父组件中声明全局上下文变量，并且可以通过this.context.name在整个组件树中访问此变量。您只需要指定childContextTypes和getChildContext

或者，如果您想要"丑陋"的方式，请执行以下操作： 内部变量.js

declare var Name = 'empty';
export default window.Name;

然后在包含"DataAreaOne"和"DataAreaTwo"的文件中导入"./vars">

import Name from './vars';

然后在课堂内

name = Name;

并像这样使用它

...
if(this.name != "something"){
...