Wie funktioniert this.context in React?

Question

Es ist kein offizielle API (yet!), Aber context kann in React Mixins super nützlich sein. Sein Verhalten und Inhalt sind jedoch für mich nicht völlig intuitiv.

Wo der Inhalt this.context kommen aus tun?

(Zum Zeitpunkt des Schreibens, Reaktion ist in der Version 0,12)

Answer 1

Ich war früher in diesen zu suchen, this.context ist ein Satz von Attributen, die implizit übergeben werden, eher auf seine Kinder nach unten als die Eigenschaften explizit vorbei . Sie können durch die Reaktion zu testen Suiten schauen, um zu sehen, wie sie sich verhalten:

https://github.com/facebook/react/blob/0.12-stable/src/core/tests/ReactCompositeComponent-test.js#L1101

https://github.com/facebook/react/blob/0.12-stable/src/core/tests/ReactElement-test.js#L100

Ich fand auch dieser Artikel hilfreich in einigen der exponierten Methoden und Verhaltensweisen zu verstehen: http://davehking.com/2014/11/15/introduction-to-contexts-in-react-js.html

Answer 2

wenn Sie nichts dagegen haben, habe ich einen Beitrag auf React Kontext https://dlinau.wordpress.com/2015/07/19/take-a-deeper-look-into-context-in-react-js

Kurz gesagt, ein Kontext ist ein Objekt mit Attributen, die implizit von einem Element an alle seine Kinder und Enkel weitergegeben werden.

Um Daten/Attribute mit untergeordneten Komponenten mit Kontext zu teilen, definiert eine Komponente die Attributnamen und Datentypen, die im Kontext verfügbar sind, indem das Attribut childContextTypes definiert wird. Außerdem muss die getChildContext-Methode definiert werden, die die Datenwerte von Attributen im Kontext zurückgibt. Die Schlüssel in childContextTypes müssen genau dieselben Schlüssel im Objekt sein, die von der Methode getChildContext zurückgegeben werden.

Wenn ein Kind Komponente will Kontext von den Eltern Daten verwenden, muss zunächst erklären, was es will durch die Definition der Attribut contextTypes explizit verwenden. contextTypes ist ein Objekt, das den Namen und den Typ der Attribute angibt, die es verwenden möchte.