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中的全局作用域是全局变量。例如：as global.foo = foo，那么您可以在任何地方使用global.foo作为全局变量。

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

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

  public nullCardNum;
    isCardNumNull(): { [key: string]: boolean } {
        let cardNumLength = this.paymentForm.controls["cardNumber"].value.length;
        if (cardNumLength == 0) {
            this.nullCardNum = true;
        }
        return null;
    }

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

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

Answer 2

看看react Context：

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

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

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

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

import Name from './vars';

然后在课程内

name = Name;

并像这样使用它

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

Answer 3

另一种简单的方法是在构造函数下声明它。

constructor(props) {
    super(props);
    this.myData = 0;
}

//you can use myData through the component
//for ex : this.myData += 1

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

3 个答案: