私は、スタックオーバーフローを含め、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');
}
}
});
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
反応コンテキストを見てください:
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"){
...
別の簡単な方法は、コンストラクタの下で宣言することです。
constructor(props) {
super(props);
this.myData = 0;
}
//you can use myData through the component
//for ex : this.myData += 1