i18nÇeviri nesnesini bir bileşende bir kez başlattım (uygulamada yüklenen ilk bileşen). Diğer tüm bileşenlerde aynı nesne gereklidir. Her bileşende yeniden başlatmak istemiyorum. Yol nedir? render()Yöntemde kullanmam gerektiğinden pencere kapsamı için kullanılabilir hale getirmek yardımcı olmuyor .

Lütfen bu sorunlar için i18n'ye özel bir çözüm değil, genel bir çözüm önerin.

Neden Bağlam kullanmayı denemiyorsun ?

Üst bileşenlerin herhangi birinde global bir bağlam değişkeni tanımlayabilirsiniz ve bu değişkene tarafından bileşen ağacından erişilebilir this.context.varname. Yalnızca belirtmek zorunda childContextTypesve getChildContextebeveyn bileşeninde ve bundan sonra kullanmayı / sadece belirtilerek herhangi bileşenden bu değiştirebilir contextTypesçocuk bileşeninde.

Ancak, lütfen belgelerde belirtildiği gibi bunu not edin:

Net kod yazarken en iyi genel değişkenlerden kaçınıldığı gibi, çoğu durumda bağlam kullanmaktan kaçınmalısınız. Özellikle, "yazmayı kaydetmek" için kullanmadan ve açık sahne aktarımı yerine onu kullanmadan önce iki kez düşünün.

React'in Ötesinde

Bir içe aktarmanın zaten global olduğunun farkında olmayabilirsiniz . Bir nesneyi (tekli) dışa aktarırsanız, o zaman global olarak bir ithalat ifadesi olarak erişilebilir hale gelir ve aynı zamanda genel olarak da değiştirilebilir .

Bir şeyi global olarak başlatmak, ancak yalnızca bir kez değiştirilmesini sağlamak istiyorsanız, başlangıçta değiştirilebilir özelliklere sahip olan bu tekli yaklaşımı kullanabilirsiniz , ancak daha Object.freezesonra ilk kullanımdan sonra, başlangıç ​​senaryonuzda değişmez olmasını sağlamak için kullanabilirsiniz .

const myInitObject = {}
export default myInitObject

sonra onu referans veren init yönteminizde:

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

myInitObjectHer yerde başvurulabilir hala küresel olacak bir ithalat olarak ama donmuş kalır ve kimse girişimleri değiştirmek için eğer atar.

React-create-app kullanıyorsanız

(aslında aradığım şey) Bu senaryoda, ortam değişkenlerine atıfta bulunurken genel nesneleri temiz bir şekilde başlatabilirsiniz.

Projenizin kök dizininde, önekli REACT_APP_değişkenler içeren bir .env dosyası oluşturmak oldukça güzel. JS ve JSX'inizde process.env.REACT_APP_SOME_VARihtiyaç duyduğunuzda referans verebilirsiniz VE tasarım gereği değiştirilemez.

Bu window.myVar = %REACT_APP_MY_VAR%, HTML'de ayarlama zorunluluğunu ortadan kaldırır .

Bununla ilgili daha yararlı ayrıntıları doğrudan Facebook'tan görün:

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

Önerilmez, ancak .... uygulama sınıfınızdan componentWillMount'u kullanarak global değişkenlerinizi ekleyebilirsiniz ... bunun gibi biraz:

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

Yine de bunu bir hack olarak düşünün ... ama işinizi halledecektir

btw componentWillMount, oluşturmadan önce bir kez çalıştırılır, daha fazlasını burada görebilirsiniz: https://reactjs.org/docs/react-component.html#mounting-componentwillmount

Bu içerikle ./src klasöründe "config.js" adlı bir dosya oluşturun:

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

Ana dosyanıza "index.js" şu satırı koyun:

import './config';

Nesnenize ihtiyacınız olan her yerde şunu kullanın:

global.config.i18n.welcome.en

Global değişkenleri web paketinde tutabilir, yani webpack.config.js

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

Js modülünde gibi okuyabilir

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

Umarım bu yardımcı olur.

Şimdiye kadar bulduğum en iyi yol React Context'i kullanmak, ancak onu yüksek dereceli bir sağlayıcı bileşeni içinde izole etmektir .

Mixins'i react https://facebook.github.io/react/docs/reusable-components.html#mixins'de kullanabilirsiniz .

İşte React Native uygulamamız globalThisiçin kullandığımız modern bir yaklaşım .

globalThis şimdi dahil ...

• Modern tarayıcılar - MDN belgeleri
• Typescript 3.4 - El kitabı belgeleri
• ESLint v7 - Sürüm notları

_{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 ( ana giriş noktası dosyamız )}

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

Bu "React Context" şeyiyle ne söylemeye çalıştıklarını bilmiyorum - benim için Yunanca konuşuyorlar, ama ben bunu şöyle yaptım:

Değerleri fonksiyonlar arasında aynı sayfada taşımak

Yapıcınızda ayarlayıcınızı bağlayın:

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

Ardından kurucunuzun hemen altında bir işlev bildirin:

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

Ayarlamak istediğinizde arayın this.setSomeVariable("some value");

(Kurtulabilirsin bile this.state.myProperty = "some value";)

Almak istediğinde ara var myProp = this.state.myProperty;

Kullanmak alert(myProp);size vermelidir some value.

Sayfalar / bileşenler arasında değerleri taşımak için ekstra iskele yöntemi

Bir modeli this(teknik olarak this.stores) atayabilirsiniz , böylece daha sonra şununla referans alabilirsiniz 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

Adlı bir klasöre bu kaydet storesolarak yourForm.jsx.

Sonra bunu başka bir sayfada yapabilirsiniz:

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

Aşağıdaki this.state.someGlobalVariablegibi bir işlevi kullanarak başka bir bileşen ayarladıysanız :

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

yapıcıda şununla bağladığınız:

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

içindeki değer, yukarıda gösterilen kod kullanılarak propertyTextToAddgörüntülenecektir SomePage.