Inicializei o i18nobjeto de tradução uma vez em um componente (primeiro componente que carrega no aplicativo). Esse mesmo objeto é necessário em todos os outros componentes. Não quero reinicializá-lo em todos os componentes. Qual é o caminho? Torná-lo disponível para o escopo da janela não ajuda, pois preciso usá-lo no render()método.

Por favor, sugira uma solução genérica para esses problemas e não uma solução específica para i18n.

Por que você não tenta usar Context ?

Você pode declarar uma variável de contexto global em qualquer um dos componentes pai e essa variável estará acessível na árvore de componentes por this.context.varname. Você só precisa especificar childContextTypese getChildContextno componente pai e, a partir daí, pode usar / modificar isso de qualquer componente, apenas especificando contextTypesno componente filho.

No entanto, observe isso conforme mencionado nos documentos:

Assim como as variáveis ​​globais devem ser evitadas ao escrever um código claro, você deve evitar o uso de contexto na maioria dos casos. Em particular, pense duas vezes antes de usá-lo para "economizar digitação" e usá-lo em vez de passar acessórios explícitos.

Beyond React

Você pode não estar ciente de que uma importação já é global . Se você exportar um objeto (singleton), ele ficará acessível globalmente como uma instrução de importação e também poderá ser modificado globalmente .

Se você deseja inicializar algo globalmente, mas garantir que seja modificado apenas uma vez, você pode usar essa abordagem singleton que inicialmente tem propriedades modificáveis, mas você pode usar Object.freezeapós seu primeiro uso para garantir que seja imutável em seu cenário de inicialização.

const myInitObject = {}
export default myInitObject

então em seu método init referenciando-o:

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

O myInitObjectainda será global, pois pode ser referenciado em qualquer lugar como uma importação mas permanecerá congelado e lançado se alguém tentar modificá-lo.

Se estiver usando react-create-app

(o que eu estava procurando na verdade) Neste cenário, você também pode inicializar objetos globais de forma limpa ao fazer referência a variáveis ​​de ambiente.

Criar um arquivo .env na raiz do seu projeto com REACT_APP_variáveis prefixadas dentro faz muito bem. Você pode fazer referência em seu JS e JSXprocess.env.REACT_APP_SOME_VAR conforme necessário E é imutável por design.

Isso evita ter que definir window.myVar = %REACT_APP_MY_VAR%em HTML.

Veja mais detalhes úteis sobre isso diretamente do Facebook:

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

Não é recomendado, mas ... você pode usar o componentWillMount de sua classe de aplicativo para adicionar suas variáveis ​​globais através dele ... um pouco assim:

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

ainda considere isso um hack ... mas fará seu trabalho

btw componentWillMount é executado uma vez antes da renderização, veja mais aqui: https://reactjs.org/docs/react-component.html#mounting-componentwillmount

Crie um arquivo chamado "config.js" na pasta ./src com este conteúdo:

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

No seu arquivo principal "index.js" coloque esta linha:

import './config';

Onde quer que você precise do seu objeto, use isto:

global.config.i18n.welcome.en

Pode manter variáveis ​​globais em webpack, ou seja, em webpack.config.js

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

No módulo js pode ler como

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

Espero que isso ajude.

A melhor maneira que encontrei até agora é usar o React Context, mas isolá-lo dentro de um componente de provedor de alta ordem .

Você pode usar mixins em react https://facebook.github.io/react/docs/reusable-components.html#mixins .

Aqui está uma abordagem moderna, usando globalThis, que usamos para nosso aplicativo React Native .

globalThis agora está incluído em ...

• Navegadores modernos - documentação MDN
• Texto datilografado 3.4 - documentação do manual
• ESLint v7 - Notas de lançamento

_{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 ( nosso arquivo de ponto de entrada principal )}

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

Não sei o que eles estão tentando dizer com essa coisa de "React Context" - eles estão falando grego, para mim, mas aqui está como eu fiz:

Carregando valores entre funções, na mesma página

Em seu construtor, vincule seu setter:

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

Em seguida, declare uma função logo abaixo do seu construtor:

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

Quando quiser configurá-lo, ligue this.setSomeVariable("some value");

(Você pode até ser capaz de escapar impune this.state.myProperty = "some value"; )

Quando você quiser pegar, ligue var myProp = this.state.myProperty;

Usar alert(myProp);deve dar a você some value.

Método de andaime extra para transportar valores entre páginas / componentes

Você pode atribuir um modelo a this(tecnicamente this.stores), para que possa referenciá-lo com 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

Guardar esta para uma pasta chamada storescomoyourForm.jsx .

Então você pode fazer isso em outra página:

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

Se você definiu this.state.someGlobalVariableem outro componente usando uma função como:

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

que você vincula no construtor com:

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

o valor em propertyTextToAddseria exibido SomePageusando o código mostrado acima.