Aufruf der Methode auf dem obersten Ebene reagiert Komponente

Question

Ich habe eine reagieren Komponente:

var Main = React.createClass({ 
    handleFoo: function() { 
    self.setState(...); 
    }, 
    ... 
}) 

ich mache es mit:

var top = ReactDOM.Render(<Main />, document.getElementById("x")) 

Und dann später erhalte ich Daten von einer externen Quelle, und ich möchte Interaktion mit der Top-Level-Komponente, also habe ich versucht:

top.handleFoo() 

Aber ich bekomme

TypeError: top.handleFoo is not a function 

Was ist der richtige Weg, um mit der obersten Reaktionskomponente von außerhalb der Komponentenhierarchie zu interagieren?

Answer 1

Was genau versuchen Sie zu tun?

Datenübergabe in der Regel zu Reagieren erfolgt props mit:

var data = /* get your data from this external source */ 
ReactDOM.Render(<Main mydata={data} />, document.getElementById("x")) 

Hier bekommen wir einige Daten, und es zu unserer Hauptkomponente als Stütze genannt mydata vorbei.

Aus unserer Komponente können wir die Requisiten verwenden wir so empfangen:

var Main = React.createClass({ 
    handleFoo: function() { 
    var mydata = this.props.mydata; 
    /* do what you want with data */ 
    self.setState(...); 
    }, 
    ... 
}) 

Bitte beachten Sie, dass, wenn Sie die Daten, die Sie Main passieren aktualisieren möchten, würden Sie es wieder machen müssen, wenn Sie wollen um zu vermeiden, dass Sie entweder die Daten von der Komponente abrufen oder den Anwendungsstatus mithilfe von redux und react-redux verwalten können.

Gibt es einen Grund, warum Sie die Daten nicht innerhalb der Komponente selbst abrufen?

Answer 2

Alle Statusänderungen sollten innerhalb der Komponente vorgenommen werden. Es gibt zwei Arten von externen Komponenten, die mit der Klasse interagieren: Parent und Peer. Elternkomponenten können ihren Status ändern, indem sie neue Requisiten senden. Peer-Komponenten sollten den Status mithilfe von Ereignissen ändern.