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

全局范圍可用於存儲全局配置或類似的東西。 在不同視圖之間共享變量，作為您的描述，您可以選擇許多其他解決方案（使用 redux、flux 或將它們存儲在更高的組件中），全局范圍不是一個好的選擇。

定義全局變量的一個好習慣是使用 js 文件。 例如 global.js

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

然后，確保在項目初始化時執行它。 例如，在 index.js 中導入文件：

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

Answer 2

看看反應上下文：

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