Saya menginisialisasi i18nobjek terjemahan sekali dalam sebuah komponen (komponen pertama yang dimuat dalam aplikasi). Objek yang sama diperlukan di semua komponen lainnya. Saya tidak ingin menginisialisasi ulang di setiap komponen. Bagaimana jalannya? Membuatnya tersedia untuk lingkup jendela tidak membantu karena saya perlu menggunakannya dalam render()metode.

Harap sarankan solusi umum untuk masalah ini dan bukan solusi khusus i18n.

Mengapa Anda tidak mencoba menggunakan Konteks ?

Anda dapat mendeklarasikan variabel konteks global di salah satu komponen induk dan variabel ini akan dapat diakses di seluruh pohon komponen dengan this.context.varname. Anda hanya perlu menentukan childContextTypesdan getChildContextdalam komponen induk dan setelah itu Anda dapat menggunakan / memodifikasi ini dari komponen manapun dengan hanya menentukan contextTypesdi komponen anak.

Namun, harap perhatikan ini seperti yang disebutkan dalam dokumen:

Sama seperti variabel global sebaiknya dihindari saat menulis kode yang jelas, Anda harus menghindari penggunaan konteks dalam banyak kasus. Secara khusus, pikirkan dua kali sebelum menggunakannya untuk "menyimpan pengetikan" dan menggunakannya alih-alih meneruskan alat peraga eksplisit.

Beyond React

Anda mungkin tidak menyadari bahwa impor sudah bersifat global . Jika Anda mengekspor objek (tunggal), objek tersebut dapat diakses secara global sebagai pernyataan impor dan juga dapat dimodifikasi secara global .

Jika Anda ingin menginisialisasi sesuatu secara global tetapi memastikannya hanya dimodifikasi sekali, Anda dapat menggunakan pendekatan tunggal ini yang awalnya memiliki properti yang dapat dimodifikasi tetapi kemudian Anda dapat menggunakannya Object.freezesetelah penggunaan pertama untuk memastikannya tidak dapat diubah dalam skenario init Anda.

const myInitObject = {}
export default myInitObject

lalu dalam metode init Anda mereferensikannya:

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

Surat myInitObjectwasiat masih bersifat global karena dapat dirujuk di mana saja sebagai impor tetapi akan tetap dibekukan dan dibuang jika ada yang mencoba untuk memodifikasinya.

Jika menggunakan react-create-app

(Apa yang saya cari sebenarnya) Dalam skenario ini Anda juga dapat menginisialisasi objek global dengan rapi saat mereferensikan variabel lingkungan.

Membuat file .env di root proyek Anda dengan REACT_APP_variabel awalan di dalamnya cukup berhasil. Anda dapat mereferensikan dalam JS dan JSX process.env.REACT_APP_SOME_VARsesuai kebutuhan DAN tidak dapat diubah menurut desain.

Ini menghindari harus mengatur window.myVar = %REACT_APP_MY_VAR%dalam HTML.

Lihat detail yang lebih berguna tentang ini dari Facebook secara langsung:

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

Tidak disarankan tetapi .... Anda dapat menggunakan componentWillMount dari kelas aplikasi Anda untuk menambahkan variabel global Anda melaluinya ... mirip seperti ini:

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

masih menganggap ini hack ... tetapi itu akan menyelesaikan pekerjaan Anda

btw componentWillMount dijalankan satu kali sebelum rendering, lihat selengkapnya di sini: https://reactjs.org/docs/react-component.html#mounting-componentwillmount

Buat file bernama "config.js" di folder ./src dengan konten ini:

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

Di file utama Anda "index.js" letakkan baris ini:

import './config';

Di mana pun Anda membutuhkan objek, gunakan ini:

global.config.i18n.welcome.en

Dapat menyimpan variabel global di webpack yaitu di webpack.config.js

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

Dalam modul js bisa dibaca seperti

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

Semoga ini bisa membantu.

Cara terbaik yang saya temukan sejauh ini adalah dengan menggunakan React Context tetapi mengisolasinya di dalam komponen penyedia tingkat tinggi .

Anda dapat menggunakan mixin dalam bereaksi https://facebook.github.io/react/docs/reusable-components.html#mixins .

Ini adalah pendekatan modern, menggunakan globalThis, kami mengambil untuk aplikasi React Native kami .

globalThis sekarang termasuk dalam ...

• Browser modern - dokumentasi MDN
• Ketikan 3.4 - Dokumentasi Buku Pegangan
• ESLint v7 - Catatan rilis

_{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 ( file titik masuk utama kami )}

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.
  },
});

Saya tidak tahu apa yang mereka coba katakan dengan hal-hal "Konteks Bereaksi" - mereka berbicara bahasa Yunani, bagi saya, tapi begini cara saya melakukannya:

Membawa nilai antar fungsi, di halaman yang sama

Dalam konstruktor Anda, ikat penyetel Anda:

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

Kemudian nyatakan fungsi tepat di bawah konstruktor Anda:

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

Saat Anda ingin menyetelnya, panggil this.setSomeVariable("some value");

(Anda bahkan mungkin bisa lolos dengan this.state.myProperty = "some value";)

Jika Anda ingin mendapatkannya, telepon var myProp = this.state.myProperty;

Menggunakan alert(myProp);seharusnya memberi Anda some value.

Metode perancah ekstra untuk membawa nilai di seluruh halaman / komponen

Anda dapat menetapkan model ke this(secara teknis this.stores), sehingga Anda dapat mereferensikannya dengan 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

Simpan ini ke folder bernama storessebagai yourForm.jsx.

Kemudian Anda dapat melakukan ini di halaman lain:

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

Jika Anda telah mengatur this.state.someGlobalVariablekomponen lain menggunakan fungsi seperti:

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

yang Anda ikat dalam konstruktor dengan:

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

nilai dalam propertyTextToAddakan ditampilkan dengan SomePagemenggunakan kode yang ditunjukkan di atas.