i18nRaz zainicjowałem obiekt translacji w komponencie (pierwszym komponencie, który ładuje się w aplikacji). Ten sam obiekt jest wymagany we wszystkich innych komponentach. Nie chcę ponownie inicjować go w każdym komponencie. Co to jest? Udostępnienie go zakresowi okna nie pomaga, ponieważ muszę go użyć w render()metodzie.

Proszę zasugerować ogólne rozwiązanie tego problemu, a nie konkretne rozwiązanie dla i18n.

Dlaczego nie spróbujesz użyć kontekstu ?

Możesz zadeklarować globalną zmienną kontekstową w dowolnym komponencie nadrzędnym, a zmienna ta będzie dostępna w drzewie komponentów przez this.context.varname. Musisz tylko określić childContextTypesi getChildContextw komponencie nadrzędnym, a następnie możesz użyć / zmodyfikować to z dowolnego komponentu, po prostu określając contextTypeskomponent podrzędny.

Należy jednak zwrócić uwagę na to, jak wspomniano w dokumentach:

Tak jak podczas pisania czystego kodu najlepiej unikać zmiennych globalnych, w większości przypadków należy unikać kontekstu. W szczególności, zastanów się dwa razy, zanim użyjesz go do „oszczędzenia pisania” i skorzystaj z niego zamiast przekazywania jawnych właściwości.

Beyond React

Możesz nie wiedzieć, że import jest już globalny . Jeśli eksportujesz obiekt (singleton), jest on wtedy dostępny globalnie jako instrukcja importu i może być również modyfikowany globalnie .

Jeśli chcesz zainicjować coś globalnie, ale upewnij się, że zostanie zmodyfikowany tylko raz, możesz użyć tego podejścia pojedynczego, które początkowo ma modyfikowalne właściwości, ale możesz użyć go Object.freezepo pierwszym użyciu, aby zapewnić jego niezmienność w scenariuszu inicjującym.

const myInitObject = {}
export default myInitObject

następnie w swojej metodzie init odwołując się do niego:

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

myInitObjectNadal będzie globalna, ponieważ może się odwoływać wszędzie jako import , ale pozostaną zamrożone i rzucać jeśli ktoś próbuje go zmodyfikować.

Jeśli używasz aplikacji react-create-app

(czego właściwie szukałem) W tym scenariuszu można również czysto inicjalizować obiekty globalne podczas odwoływania się do zmiennych środowiskowych.

Utworzenie pliku .env w katalogu głównym projektu z prefiksowymi REACT_APP_zmiennymi wewnątrz robi całkiem nieźle. Możesz odwoływać się w swoim JS i JSX, process.env.REACT_APP_SOME_VARjak potrzebujesz, ORAZ jest to niezmienne zgodnie z projektem.

Pozwala to uniknąć konieczności ustawiania window.myVar = %REACT_APP_MY_VAR%w HTML.

Zobacz więcej przydatnych informacji na ten temat bezpośrednio z Facebooka:

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

Nie jest to zalecane, ale ... możesz użyć componentWillMount z klasy aplikacji, aby dodać przez nią zmienne globalne ... trochę tak:

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

nadal uważaj to za hack ... ale to wykona twoją pracę

btw componentWillMount wykonuje się raz przed renderowaniem, więcej informacji znajdziesz tutaj: https://reactjs.org/docs/react-component.html#mounting-componentwillmount

Utwórz plik o nazwie „config.js” w folderze ./src z następującą zawartością:

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

W swoim głównym pliku „index.js” umieść następującą linię:

import './config';

Gdziekolwiek potrzebujesz swojego obiektu, użyj tego:

global.config.i18n.welcome.en

Może przechowywać zmienne globalne w webpacku, czyli w webpack.config.js

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

W module js można przeczytać jak

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

Mam nadzieję, że to pomoże.

Najlepszym sposobem, jaki znalazłem do tej pory, jest użycie kontekstu reakcji, ale w celu odizolowania go wewnątrz komponentu dostawcy wysokiego rzędu .

Możesz użyć mixinów w React https://facebook.github.io/react/docs/reusable-components.html#mixins .

Oto nowoczesne podejście, które wykorzystaliśmy globalThisw naszym React Native aplikacji .

globalThis jest teraz uwzględniony w ...

• Nowoczesne przeglądarki - dokumentacja MDN
• Maszynopis 3.4 - Dokumentacja podręcznika
• ESLint v7 - Informacje o wersji

_{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 ( nasz główny plik punktu wejścia )}

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

Nie wiem, co próbują powiedzieć za pomocą tego „kontekstu reakcji” - mówią do mnie po grecku, ale oto jak to zrobiłem:

Przenoszenie wartości między funkcjami na tej samej stronie

W swoim konstruktorze powiąż setera:

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

Następnie zadeklaruj funkcję tuż pod konstruktorem:

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

Jeśli chcesz to ustawić, zadzwoń this.setSomeVariable("some value");

(Możesz nawet ujść na sucho this.state.myProperty = "some value";)

Kiedy będziesz chciał, zadzwoń var myProp = this.state.myProperty;

Używanie alert(myProp);powinno ci daćsome value .

Dodatkowa metoda tworzenia szkieletów do przenoszenia wartości między stronami / komponentami

Możesz przypisać model do this(technicznie this.stores), więc możesz odwołać się do niego za pomocą 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

Zapisz to w folderze o nazwie storesjako yourForm.jsx.

Następnie możesz to zrobić na innej stronie:

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

Jeśli ustawiłeś this.state.someGlobalVariableinny komponent za pomocą funkcji takiej jak:

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

który łączysz w konstruktorze z:

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

wartość w propertyTextToAddzostanie wyświetlona przy SomePageużyciu kodu pokazanego powyżej.