Javascript 如何在 React JS 中声明全局变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51240409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to declare global variables in React JS
提问by Hyman Hanson
I've been searching all over the net, including stack overflow, how to declare global variables in JS React.
我一直在网上搜索，包括堆栈溢出，如何在 JS React 中声明全局变量。
I have a declared variable called nameand I'd like to use this variable in two different sections of my code. But I it returns as an undefined variable in some sections of the code, even though I've left it outside all the functions, as global variables usually are.
我有一个名为name的声明变量，我想在代码的两个不同部分中使用这个变量。但是我在代码的某些部分作为未定义的变量返回，即使我已经将它留在所有函数之外，因为全局变量通常是这样。
Is there supposed to be a special way to declare global variables in React?
是否应该有一种特殊的方式在 React 中声明全局变量？
My Js React Code -- its a very simple sample of my code to give insight
我的 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');
}
}
});
回答by Vighnesh Pai
The global scope in React Native is variable global. For ex: as global.foo = foo, then you can use global.foo anywhere as a global variable.
React Native 中的全局作用域是全局变量。例如：as global.foo = foo，那么你可以在任何地方使用 global.foo 作为全局变量。
The global scope may be used to store the global config or similar things. Share variables between different views, as your description, you can choose many other solutions(use redux,flux or store them in a higher component), the global scope is not a good choice.
全局范围可用于存储全局配置或类似的东西。在不同视图之间共享变量，作为您的描述，您可以选择许多其他解决方案（使用 redux、flux 或将它们存储在更高的组件中），全局范围不是一个好的选择。
A good practice to define global variable is to use a js file. For example global.js
定义全局变量的一个好习惯是使用 js 文件。例如 global.js
global.foo = foo;
global.bar = bar;
Then, to make sure it is executed when project initialized. For example, import the file in index.js:
然后，确保在项目初始化时执行它。例如，在 index.js 中导入文件：
import './global.js'
// other code
回答by Roy.B
Have a look at react Context :
看看反应上下文：
https://reactjs.org/docs/context.html
https://reactjs.org/docs/context.html
simple example:
简单的例子：
const ThemeContext = React.createContext('name');
if you are using react 16.2 and lower use this legacy react context:
如果您使用的是 react 16.2 并且更低，请使用此旧版 react 上下文：
https://reactjs.org/docs/legacy-context.html
https://reactjs.org/docs/legacy-context.html
You can declare a global context variable in any of the parent components and this variable will be accessible across the component tree by this.context.name. You only have to specify childContextTypesand getChildContext
您可以在任何父组件中声明一个全局上下文变量，并且可以通过this.context.name. 您只需要指定childContextTypes和getChildContext
or if you want the "ugly" way, do this: inside vars.js
或者，如果您想要“丑陋”的方式，请执行以下操作：在 vars.js 中
declare var Name = 'empty';
export default window.Name;
then import './vars' in the file that contains "DataAreaOne" and "DataAreaTwo"
然后在包含“DataAreaOne”和“DataAreaTwo”的文件中导入'./vars'
import Name from './vars';
then inside the class
然后在班级里面
name = Name;
and use it like so
并像这样使用它
...
if(this.name != "something"){
...
回答by Soorya
Another simple way is just to declare it under constructor.
另一种简单的方法是在构造函数下声明它。
constructor(props) {
super(props);
this.myData = 0;
}
//you can use myData through the component
//for ex : this.myData += 1
