web-dev-qa-db-ja.com

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

i18n翻訳オブジェクトをコンポーネント（アプリに最初に読み込まれるコンポーネント）で1回初期化しました。他のすべてのコンポーネントにも同じオブジェクトが必要です。すべてのコンポーネントで再初期化したくはありません。回避策は何ですか？ウィンドウスコープで利用できるようにしてもrender()メソッドで使用する必要があるので役に立ちません。

国際化固有の解決策ではなく、これらの問題に対する一般的な解決策を提案してください。

reactjsjavascript-globalize
69
sapy

コンテキスト を使ってみませんか？

どの親コンポーネントでもグローバルコンテキスト変数を宣言することができ、この変数はthis.context.varnameによってコンポーネントツリー全体でアクセス可能になります。親コンポーネントにchildContextTypesとgetChildContextを指定するだけでよく、その後、子コンポーネントにcontextTypesを指定するだけで、任意のコンポーネントからこれを使用/変更できます。

ただし、docsに記載されているようにこれに注意してください。

明確なコードを書くときにグローバル変数が最も避けられるのと同じように、ほとんどの場合はコンテキストの使用を避けるべきです。特に、明示的な小道具を渡す代わりにそれを「型付けを保存する」ために使う前に二度考えてください。

33
Naisheel Verdhan

お勧めしませんが、アプリケーションクラスからcomponentWillMountを使用してグローバル変数を追加できます。

componentWillMount: function () {
    window.MyVars = {
        ajax: require('../helpers/ajax.jsx'),
        utils: require('../helpers/utils.jsx')
    };
}

まだこれをハックと考えています...しかしそれはあなたの仕事を成し遂げるでしょう

btw componentWillMountはレンダリング前に1回実行されます。詳細はこちらを参照してください。 https://reactjs.org/docs/react-component.html#mounting-componentwillmount

30
rokyed

Reactを超えて

importがすでにグローバルであることに気付いていないかもしれません。オブジェクト（シングルトン）をエクスポートする場合、インポートステートメントとしてグローバルにアクセスでき、itはグローバルに変更することもできます。

何かをグローバルに初期化するが、一度だけ変更するようにしたい場合は、最初に変更可能なプロパティを持つこのsingleton approachを使用できますが、最初の使用後にObject.freezeを使用して確認できますinitシナリオではimmutableです。

const myInitObject = {}
export default myInitObject

次に、それを参照するinitメソッドで：

import myInitObject from './myInitObject'
myInitObject.someProp = 'i am about to get cold'
Object.freeze(myInitObject)

myInitObjectは、importとしてどこでも参照できるため、グローバルのままですが、だれかがそれを変更しようとするとフリーズされ、スローされます。

React-create-appを使用する場合

（実際に探していたもの）このシナリオでは、環境変数を参照するときにグローバルオブジェクトをきれいに初期化することもできます。

プロジェクトのルートに.envファイルを作成し、REACT_APP_変数をプレフィックスとして内部に作成すると、非常にうまくいきます。必要に応じてJSおよびJSX process.env.REACT_APP_SOME_VAR内で参照できますが、設計上は不変です。

これにより、HTMLでwindow.myVar = %REACT_APP_MY_VAR%を設定する必要がなくなります。

Facebookから直接、これに関する有用な詳細を参照してください：

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

8
Jason Sebring

ミックスインをreact https://facebook.github.io/react/docs/reusable-components.html#mixins に使用できます。

3
Ramratan Gupta

グローバル変数をウェブパック、すなわちwebpack.config.jsに保存することができます

externals: {
  'config': JSON.stringify(GLOBAL_VARIABLE: "global var value")
}

Jsモジュールでは以下のように読むことができます

var config = require('config')
var GLOBAL_VARIABLE = config.GLOBAL_VARIABLE

これが役立つことを願っています。

2
Shashank Bhong

私がこれまでに見つけた最良の方法は React Context を使うことですが、それを 高次プロバイダコンポーネントの中に隔離することです。 .

2
Nick Tsoyrektsidis