如何在React JS中声明全局变量 [英] How to declare global variables in React JS

问题描述

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

I've been searching all over the net, including stack overflow, how to declare global variables in JS React.

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

I have a declared variable called name and 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.

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

Is there supposed to be a special way to declare global variables in 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中的全局作用域是变量global.例如:as global.foo = foo，那么您可以在任何地方使用global.foo作为全局变量.

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.

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

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.

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

A good practice to define global variable is to use a js file. For example global.js

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

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

Then, to make sure it is executed when project initialized. For example, import the file in index.js:

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

这篇关于如何在React JS中声明全局变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！