Verweise auf eine Variable außerhalb der Komponente in React?

Question

Das mag eine dumme Frage sein, aber ich bin neugierig, ob das möglich ist (empfohlen). Beachten Sie Folgendes:

export default class Example extends Component { 

    constructor(props){ 
    super(props); 

    this._variable = value; 
    } 

    render() { 
    return (<div>{this.props.children}</div>); 
    } 
} 

Jetzt weiß ich, ich this._variable unten an die Kinder weitergeben können, so dass:

this._childrenWithProps = React.Children.map(this.props.children, 
    (child) => React.cloneElement(child, { 
     variable: this._variable, 
    }) 
); 

Jetzt je Kind Zugang zu this.props.variable hat. Aber (und ich nicht voll dieses Konzept verstehen) konnte ich Kontext oder etwas Simmilar in der Lage sein:

// In another component some where ... 
render() { 
    // reference variable (this._variable, or variable) here 

    <Example> 
    // Children here ... 
    </Example> 
} 

ist es das, was Kontext verwendet wird? Oder mache ich etwas schrecklich falsch? im Wesentlichen ich möchte this._variable außerhalb des Elements verweisen, aber es innerhalb des Elements einrichten. Ist das möglich?

Answer 1

Ja, Sie können Kontext verwenden, um eine Variable an alle Nachkommen einer Komponente zu übergeben, aber als allgemeine Faustregel sollten Sie vermeiden Kontext verwenden, wenn Sie es nicht unbedingt benötigen. Kontext unterbricht das Datenflussmuster von React und macht den Code im Allgemeinen schwieriger zu lesen, da Requisiten implizit statt explizit sein können. Entsprechend der Dokumentation:

Die Verwendung von Kontext wird Ihren Code schwerer verständlich machen, weil dadurch der Datenfluss weniger klar wird. Es ähnelt der Verwendung globaler Variablen, um den Status durch Ihre Anwendung zu übergeben.

Im Allgemeinen funktioniert Kontext am besten für Dinge wie Themeninformationen und ist auch in bestimmten Routing-Bibliotheken nützlich. Normalerweise gibt es einen besseren Weg, um Daten weiterzugeben (Ihr auf React.Children Beispiel ist völlig in Ordnung und eine ziemlich häufige Stück Code, die Sie in vielen React-Projekten finden werden).

Wenn Sie noch Kontext nach dieser Warnung verwenden möchten, dann müssen Sie einige Anpassungen an der Komponente vornehmen müssen, die den Kontext liefert (in der Regel ein Wrapper) und die Komponente (n), dass erhält den Kontext .

Ihr Kontextanbieter benötigt eine getChildContext-Funktion, die das Kontextobjekt zurückgibt, das Sie allen untergeordneten Elementen zur Verfügung stellen möchten. Sie müssen auch angeben, was die childContextTypes als eine Eigenschaft der Klasse sind.

class Example extends Component { 

    getChildContext() { 
    return { variable: 'foo' }; 
    } 

    render() { 
    return (<div>{this.props.children}</div>); 
    } 
} 

Example.childContextTypes = { 
    variable: React.PropTypes.string 
}; 

Dann, wo Sie die Komponenten definieren, die als Kinder weitergegeben werden, die Sie wollen erhalten den Kontext, müssen Sie die gleiche childContextTypes Eigenschaft hinzufügen. Es wird über das Objekt this.context Zugriff auf den Kontext haben.

class Child extends Component { 

    render() { 
    return (<div>{this.context.variable}</div>); 
    } 
} 

Child.childContextTypes = { 
    variable: React.PropTypes.string 
}; 

die childContextTypes Schreiben ist notwendig. Wie Sie sehen, bedeutet die Verwendung von Kontext nicht immer weniger Code.