web-dev-qa-db-ja.com

React JSでグローバル変数を宣言する方法

私は、スタックオーバーフローを含め、JS Reactでグローバル変数を宣言する方法を含め、ネット全体を検索してきました。

nameという宣言された変数があり、コードの2つの異なるセクションでこの変数を使用したいと思います。しかし、通常、グローバル変数と同様に、すべての関数の外側に置いたとしても、コードの一部のセクションで未定義の変数として返されます。

Reactでグローバル変数を宣言する特別な方法があるはずですか？

My 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');
        }  

    }

});
javascriptreactjsglobal-variables
6
Jack Hanson

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
2
Vighnesh Pai

反応コンテキストを見てください：

https://reactjs.org/docs/context.html

簡単な例：

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

反応16.2以下を使用している場合は、このレガシーの反応コンテキストを使用します。

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"){
...
2
Roy.B

別の簡単な方法は、コンストラクタの下で宣言することです。

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

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