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

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

我有一个声明的变量名为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');
        }  

    }

});

---

React Native中的全局作用域是全局变量。对于ex:as global.foo=foo，则可以在任何地方使用global.foo作为全局变量

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

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

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

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

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

---

查看react上下文：

简单的例子：

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

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

您可以在任何父组件中声明全局上下文变量，该变量将通过

this.context.name

在组件树中访问。您只需指定

childContextTypes

和

getChildContext

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

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

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

然后在课堂上

name = Name;

像这样使用它

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

可能重复的

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