Wie deklariert man eine globale Variable in React?

Question

Ich initialisierte i18n Übersetzungsobjekt einmal in einer Komponente (erste Komponente, die in der App geladen wird). Das gleiche Objekt wird in allen anderen Komponenten benötigt. Ich möchte es nicht in jeder Komponente neu initialisieren. Wie läuft es? Es für den Fensterbereich verfügbar zu machen, hilft nicht, da ich es in render() Methode verwenden muss.

Bitte schlagen Sie eine generische Lösung für dieses Problem vor und nicht eine spezielle Lösung.

Answer 1

Warum versuchen Sie nicht Context?

Sie können eine globale Kontextvariable in einer der übergeordneten Komponenten deklarieren, und diese Variable ist im Komponentenbaum über this.context.varname zugänglich. Sie müssen nur childContextTypes und getChildContext in der übergeordneten Komponente angeben und danach können Sie dieses aus jeder Komponente verwenden/ändern, indem Sie einfach contextTypes in der untergeordneten Komponente angeben.

Allerdings nehmen Sie bitte eine Notiz von diesem wie in docs erwähnt:

Gerade als globale Variablen am besten vermieden werden, wenn klaren Code zu schreiben, sollten Sie in den meisten Fällen unter Verwendung von Kontext vermeiden. Insbesondere sollten Sie es sich zweimal überlegen, bevor Sie es verwenden, um "Tipparbeit zu sparen" und es zu verwenden, anstatt explizite Requisiten zu übergeben.

Answer 2

Sie können Mixins in Reaktion https://facebook.github.io/react/docs/reusable-components.html#mixins verwenden.

Answer 3

wird nicht empfohlen, aber .... Sie componentWillMount von Ihrer App-Klasse verwenden, können Sie Ihre globalen Variablen durch sie ... ein bisschen wie so hinzuzufügen:

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

noch halten dies für ein Hack ... aber es wird erhalten Ihre Arbeit

getan

btw componentWillMount einmal ausgeführt, bevor Rendering, sehen sie hier mehr: https://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount

Answer 4

Der beste Weg, die ich gefunden habe, so weit ist React Context zu verwenden, sondern zu isolieren es in einem high order provider component.

Answer 5

Ich weiß nicht, was sie mit diesen „React Context“ Sachen sagen wollen - sie sprechen Griechisch, zu mir, aber hier ist, wie ich es tat:

In Ihrem Konstruktor, binden Sie Ihre setzer:

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

dann eine Funktion direkt unter Ihrem Konstruktor deklarieren:

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

Wenn Sie es einrichten möchten, rufen this.setSomeVariable("some value");

(Man könnte sogar in der Lage sein, mit this.state.myProperty = "some value"; wegzukommen)

Wenn Sie es möchten, rufen Sie var myProp = this.state.myProperty;

alert(myProp); benutzen, sollten Sie some value geben.