So greifen Sie von einer anderen Komponente aus auf den Status einer Komponente zu

Question

Wie greife ich auf den Status einer Komponente in einer anderen Komponente zu? Unten ist mein Code und ich versuche, auf den Zustand der Komponente a in der Komponente b zuzugreifen.

var a = React.createClass({ 
    getInitialState: function() { 
     return { 
      first: "1" 
     }; 
    }, 

    render: function() { 
     // Render HTML here. 
    } 
}); 

var b = React.createClass({ 
    getInitialState: function() { 
     return { 
      second: a.state.first 
     }; 
    }, 

    render: function() { 
     // Render HTML here. 
    } 
}); 

Aber ich bekomme nichts.

Answer 1

Wenn zwei Komponenten Zugriff auf denselben Zustand benötigen, sollten sie einen gemeinsamen Vorgänger haben, in dem der Status beibehalten wird.

So Komponente A ist die Mutter von B und C. Komponente A den Zustand hat, und übergibt sie sich wie Requisiten B und C. Wenn Sie den Status von ändern möchten B Sie eine Callback-Funktion überliefern als eine Stütze.

Answer 2

Auch wenn Sie dies versuchen, ist es nicht die richtige Methode, auf die state zuzugreifen. Besser, eine Elternkomponente zu haben, deren Kinder a und b sind. Die ParentComponent wird die state beibehalten und sie als Requisiten an die Kinder weitergeben.

Zum Beispiel

var ParentComponent = React.createClass({ 
    getInitialState : function() { 
    return { 
     first: 1, 
    } 
    } 

    changeFirst: function(newValue) { 
    this.setState({ 
     first: newValue, 
    }); 
    } 

    render: function() { 
    return (
    <a first={this.state.first} changeFirst={this.changeFirst.bind(this)} /> 
    <b first={this.state.first} changeFirst={this.changeFirst.bind(this)} /> 
    ) 
} 
} 

Jetzt in Ihrem Kind compoenents a und b, Zugang first Variable this.props.first verwenden. Wenn Sie den Wert von first ändern möchten, rufen Sie this.props.changeFirst() Funktion der ParentComponent. Dies wird den Wert ändern und wird somit in den beiden Kindern a und b widergespiegelt.

Ich schreibe Komponente a hier wird b ähneln:

var a = React.createClass({ 

    render: function() { 
    var first = this.props.first; // access first anywhere using this.props.first in child 
    // render JSX 
    } 
} 

Answer 3

Ich würde vorschlagen, dass Sie einen Zustand Manager wie Redux verwenden (persönlicher Favorit), MobX Reflux, usw. Ihr Zustand zu verwalten.

Mit diesen Funktionen können Sie alle freigegebenen Status in einem Statusspeicher (Speicher genannt) enthalten und jede Komponente, die Zugriff auf einen Teil des gemeinsamen Status benötigt, wird nur vom Speicher abgerufen.

Es sah sehr schwer zu beginnen, aber sobald Sie über die kleinen Herausforderungen, erhalten Sie 2 oder 3 "wtf's" aus dem Weg. Es wird einfacher. hier

Werfen Sie einen Blick: http://redux.js.org/

EDIT: Redux gut ist, aber der Standardcode ist wirklich eine Abzweigung ... für sie die Suche nach einem einfacheren, magischem (dies kann gut sein, und Lösung) mobx: https://mobx.js.org/