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

i18n固有のソリューションではなく、これらの問題の一般的なソリューションを提案してください。

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

親コンポーネントのいずれかでグローバルコンテキスト変数を宣言できます。この変数には、コンポーネントツリー全体でからアクセスできますthis.context.varname。あなただけ指定する必要がありますchildContextTypesし、getChildContext親コンポーネントで、その後、あなただけ指定することで、任意のコンポーネントからこれを修正する/使用することができるcontextTypes子コンポーネントに。

ただし、ドキュメントに記載されているように、この点に注意してください。

明確なコードを書くときにグローバル変数を回避するのが最善であるのと同様に、ほとんどの場合、コンテキストの使用を回避する必要があります。特に、「タイピングを保存する」ためにそれを使用し、明示的な小道具を渡す代わりにそれを使用する前に、よく考えてください。

反応を超えて

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

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

const myInitObject = {}
export default myInitObject

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

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

myInitObjectそれはどこでも参照できるよう、まだグローバルになりますインポートなどが、凍結されたままにして、それを修正するために誰も試みた場合にスローされます。

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

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

内部に接頭辞付きの変数を含むプロジェクトのルートで.envファイルを作成すると、REACT_APP_かなりうまくいきます。process.env.REACT_APP_SOME_VAR必要に応じてJSおよびJSX内で参照できます。また、設計により不変です。

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

Facebookからこれに関するより詳細な情報を直接参照してください：

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

推奨されませんが、...アプリクラスの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を参照して ください。

次の内容で、。/ srcフォルダーに「config.js」という名前のファイルを作成します。

module.exports = global.config = {
    i18n: {
        welcome: {
            en: "Welcome",
            fa: "خوش آمدید"
        }
        // rest of your translation object
    }
    // other global config variables you wish
};

メインファイル「index.js」に次の行を追加します。

import './config';

あなたのオブジェクトが必要なところはどこでもこれを使います：

global.config.i18n.welcome.en

グローバル変数をWebpack内、つまり webpack.config.js

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

jsモジュールでは次のように読むことができます

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

これがお役に立てば幸いです。

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

mixinはreact https://facebook.github.io/react/docs/reusable-components.html#mixinsで使用できます。

ここでは現代的なアプローチがあり、使用してglobalThis、我々は我々のために取ったリアクトネイティブアプリ。

globalThis 今に含まれています...

• 最新のブラウザ-MDNドキュメント
• Typescript 3.4- ハンドブックドキュメント
• ESLint v7- リリースノート

_{appGlobals.ts}

// define our parent property accessible via globalThis. Also apply the TypeScript type.
var app: globalAppVariables;

// define the child properties and their types. 
type globalAppVariables = {
  messageLimit: number;
  // more can go here. 
};

// set the values.
globalThis.app = {
  messageLimit: 10,
  // more can go here.
};


// Freeze so these can only be defined in this file.
Object.freeze(globalThis.app);

_{App.tsx（メインのエントリポイントファイル）}

import './appGlobals'

// other code

_{anyWhereElseInTheApp.tsx}

const chatGroupQuery = useQuery(GET_CHAT_GROUP_WITH_MESSAGES_BY_ID, {
  variables: {
    chatGroupId,
    currentUserId: me.id,
    messageLimit: globalThis.app.messageLimit, // 👈 used here.
  },
});

彼らがこの "React Context"のことで何を言おうとしているのかわかりません。

同じページの関数間で値を運ぶ

コンストラクターで、セッターをバインドします。

this.setSomeVariable = this.setSomeVariable.bind(this);

次に、コンストラクタのすぐ下で関数を宣言します。

setSomeVariable(propertyTextToAdd) {
    this.setState({
        myProperty: propertyTextToAdd
    });
}

設定したいときは this.setSomeVariable("some value");

（あなたも逃げることができるかもしれませんthis.state.myProperty = "some value";）

入手したいときは、 var myProp = this.state.myProperty;

使用alert(myProp);すると、some value。

ページ/コンポーネント間で値を運ぶ追加の足場メソッド

モデルをthis（技術的にthis.stores）に割り当てることができるため、次のように参照できますthis.state。

import Reflux from 'reflux'
import Actions from '~/actions/actions`

class YourForm extends Reflux.Store
{
    constructor()
    {
        super();
        this.state = {
            someGlobalVariable: '',
        };
        this.listenables = Actions;
        this.baseState = {
            someGlobalVariable: '',
        };
    }

    onUpdateFields(name, value) {
        this.setState({
            [name]: value,
        });
    }

    onResetFields() {
        this.setState({
           someGlobalVariable: '',
        });
    }
}
const reqformdata = new YourForm

export default reqformdata

フォルダにこれを保存しstoresてyourForm.jsx。

その後、別のページでこれを行うことができます：

import React from 'react'
import Reflux from 'reflux'
import {Form} from 'reactstrap'
import YourForm from '~/stores/yourForm.jsx'

Reflux.defineReact(React)

class SomePage extends Reflux.Component {
    constructor(props) {
        super(props);
        this.state = {
            someLocalVariable: '',
        }
        this.stores = [
            YourForm,
        ]
    }
    render() {

        const myVar = this.state.someGlobalVariable;
        return (
            <Form>
                <div>{myVar}</div>
            </Form>
        )
    }
}
export default SomePage

次のthis.state.someGlobalVariableような関数を使用して別のコンポーネントを設定した場合：

setSomeVariable(propertyTextToAdd) {
    this.setState({
       myGlobalVariable: propertyTextToAdd
   });
}

コンストラクタでバインドするもの：

this.setSomeVariable = this.setSomeVariable.bind(this);

の値は、上記のコードを使用してpropertyTextToAdd表示されSomePageます。