Meine Struktur sieht wie folgt aus:
Component 1
- |- Component 2
- - |- Component 4
- - - |- Component 5
Component 3
Komponente 3 sollte je nach Status von Komponente 5 einige Daten anzeigen. Da Requisiten unveränderlich sind, kann ich ihren Status nicht einfach in Komponente 1 speichern und weiterleiten, oder? Und ja, ich habe über Redux gelesen, möchte es aber nicht verwenden. Ich hoffe, dass es möglich ist, es nur mit reagieren zu lösen. Liege ich falsch?
<MyChildComponent setState={(s,c)=>{this.setState(s, c)}} />
Wenn Sie diesen Hack verwenden, stellen Sie sicher, dass Sie den Rückruf unterstützen.this.setState(p)
? Ich habe es ohne sie versucht und es scheint zu funktionieren (ich bin sehr neu in React)Antworten:
Für die Kind-Eltern-Kommunikation sollten Sie eine Funktion übergeben, die den Status von Elternteil zu Kind wie folgt festlegt
Auf diese Weise kann das Kind den Status des Elternteils mit dem Aufruf einer mit Requisiten übergebenen Funktion aktualisieren.
Sie müssen jedoch die Struktur Ihrer Komponenten überdenken, da die Komponenten 5 und 3 meines Wissens nicht miteinander zusammenhängen.
Eine mögliche Lösung besteht darin, sie in eine Komponente höherer Ebene zu verpacken, die den Status von Komponente 1 und 3 enthält. Diese Komponente setzt den Status niedrigerer Ebene durch Requisiten.
quelle
this.handler = this.handler.bind(this)
Konstruktor hinzufügen , verweist die Funktionthis
innerhalb derhandler
Funktion auf den Funktionsabschluss und nicht auf die Klasse. Wenn Sie nicht alle Ihre Funktionen im Konstruktor binden möchten, gibt es zwei weitere Möglichkeiten, mit Pfeilfunktionen damit umzugehen. Sie können den Klick-Handler einfach als schreibenonClick={()=> this.setState(...)}
oder Eigenschaftsinitialisierer zusammen mit Pfeilfunktionen verwenden, wie hier beschrieben. Babeljs.io/blog/2015/06/07/react-on-es6-plus unter " Pfeilfunktionen "Ich habe die folgende funktionierende Lösung gefunden, um das onClick-Funktionsargument vom Kind an die übergeordnete Komponente zu übergeben:
Version mit Übergabe einer Methode ()
Schauen Sie sich JSFIDDLE an
Version mit Übergabe einer Pfeilfunktion
Schauen Sie sich JSFIDDLE an
quelle
<ChildB handleToUpdate = {handleToUpdate.bind(this)} />
Warum musste ich wieder binden?this
sich der Aufruf innerhalb des Kindesthis
auf den Status des Elternteils und nicht auf den des Kindes bezieht. Dies ist Schließung vom Feinsten!Ich möchte mich bei der am besten bewerteten Antwort dafür bedanken, dass sie mir die Idee meines eigenen Problems gegeben hat, im Grunde die Variation davon mit der Pfeilfunktion und der Übergabe von Parametern von der untergeordneten Komponente:
Hoffe es hilft jemandem.
quelle
this
In-Pfeil-Funktionen beziehen sich auf den Kontext des Elternteils (dh dieParent
Klasse).Ich mag die Antwort bezüglich der Weitergabe von Funktionen, es ist eine sehr praktische Technik.
Auf der anderen Seite können Sie dies auch mit Pub / Sub oder mit einer Variante, einem Dispatcher, erreichen, wie es Flux tut. Die Theorie ist super einfach: Lassen Sie Komponente 5 eine Nachricht senden, auf die Komponente 3 wartet. Komponente 3 aktualisiert dann ihren Status, wodurch das erneute Rendern ausgelöst wird. Dies erfordert zustandsbehaftete Komponenten, die je nach Sichtweise ein Anti-Pattern sein können oder nicht. Ich bin persönlich gegen sie und möchte lieber, dass etwas anderes von oben nach unten auf Sendungen wartet und den Status ändert (Redux tut dies, fügt aber zusätzliche Terminologie hinzu).
Das Dispatcher-Bundle mit Flux ist sehr einfach. Es registriert einfach Rückrufe und ruft sie auf, wenn ein Versand erfolgt, und durchläuft den Inhalt des Versands (im obigen knappen Beispiel gibt es keine
payload
mit dem Versand, einfach eine Nachrichten-ID). Sie können dies sehr einfach an ein traditionelles Pub / Sub anpassen (z. B. mit dem EventEmitter von Events oder einer anderen Version), wenn dies für Sie sinnvoller ist.quelle
var Dispatcher = require( 'flux' ).Dispatcher
Ich habe die folgende Arbeitslösung gefunden, um das onClick-Funktionsargument mit param vom untergeordneten Element an die übergeordnete Komponente zu übergeben:
Elternklasse:
Kinderklasse:
quelle
param1
wird nur auf der Konsole angezeigt, nicht zugewiesen, es wird immer zugewiesentrue
Wann immer Sie auf einer beliebigen Ebene zwischen Kind und Elternteil kommunizieren müssen, ist es besser, den Kontext zu nutzen . Definieren Sie in der übergeordneten Komponente den Kontext, der vom untergeordneten Element aufgerufen werden kann, z
Sie finden das Demo-Projekt bei repo
quelle
Es scheint, dass wir nur Daten von Eltern zu Kindern weitergeben können, wenn die Reaktion den unidirektionalen Datenfluss fördert. Um jedoch zu veranlassen, dass Eltern sich selbst aktualisieren, wenn etwas in ihrer "untergeordneten Komponente" passiert, verwenden wir im Allgemeinen eine sogenannte "Rückruffunktion".
In diesem Beispiel können wir Daten von SubChild -> Child -> Parent übergeben, indem wir die Funktion an das direkte Child übergeben.
quelle
Ich habe viele Male eine erstklassige Antwort von dieser Seite verwendet, aber während ich React lernte, habe ich einen besseren Weg gefunden, dies zu tun, ohne zu binden und ohne Inline-Funktion in Requisiten.
Schauen Sie einfach hier:
Die Taste befindet sich in einer Pfeilfunktion:
Sie können mehr lesen hier . Hoffe das wird für jemanden nützlich sein =)
quelle
- Wir können ParentComponent erstellen und mit der handleInputChange-Methode den ParentComponent-Status aktualisieren. Importieren Sie die ChildComponent und wir übergeben zwei Requisiten von der übergeordneten an die untergeordnete Komponente, dh.handleInputChange-Funktion und Anzahl.
Jetzt erstellen wir die ChildComponent-Datei und speichern sie als ChildComponent.jsx. Diese Komponente ist zustandslos, da die untergeordnete Komponente keinen Status hat. Wir verwenden die Prop-Typ-Bibliothek zur Überprüfung des Requisitentyps.
quelle
Wenn dasselbe Szenario nicht überall verbreitet ist, können Sie den Kontext von React verwenden, insbesondere wenn Sie nicht den gesamten Overhead einführen möchten, den Statusverwaltungsbibliotheken verursachen. Außerdem ist es einfacher zu lernen. Aber seien Sie vorsichtig, Sie könnten es überbeanspruchen und anfangen, schlechten Code zu schreiben. Grundsätzlich definieren Sie eine Containerkomponente (die diesen Status für Sie speichert und beibehält), sodass alle Komponenten, die daran interessiert sind, dieses Datenelement zu schreiben / lesen, ihre untergeordneten Elemente sind (nicht unbedingt direkte untergeordnete Elemente).
https://reactjs.org/docs/context.html
Sie können stattdessen auch einfach React richtig verwenden.
Übergeben Sie doSomethingAbout5 an Komponente 1
Wenn dies ein häufiges Problem ist, sollten Sie darüber nachdenken, den gesamten Status der Anwendung an einen anderen Ort zu verschieben. Sie haben einige Optionen, die häufigsten sind:
https://redux.js.org/
https://facebook.github.io/flux/
Anstatt den Anwendungsstatus in Ihrer Komponente zu verwalten, senden Sie grundsätzlich Befehle, wenn etwas passiert, um den Status zu aktualisieren. Komponenten ziehen den Status auch aus diesem Container, sodass alle Daten zentralisiert werden. Dies bedeutet nicht, dass der lokale Status nicht mehr verwendet werden kann, aber das ist ein fortgeschritteneres Thema.
quelle
Wenn Sie also die übergeordnete Komponente aktualisieren möchten,
Hier ist onChange ein Attribut, dessen "Handler" -Methode an seine Instanz gebunden ist. Wir haben den Methodenhandler an die Child-Klassenkomponente übergeben, um ihn über die onChange-Eigenschaft in ihrem Requisitenargument zu empfangen.
Das Attribut onChange wird in einem Requisitenobjekt wie folgt festgelegt:
und an die untergeordnete Komponente übergeben
So kann die untergeordnete Komponente wie folgt auf den Wert des Namens im Requisitenobjekt zugreifen
Dies geschieht durch die Verwendung von Render-Requisiten.
Jetzt verfügt die Child-Komponente über eine Schaltfläche "Click" mit einem Onclick-Ereignis, mit dem die über onChnge in ihrem Requisitenargumentobjekt an sie übergebene Handlermethode aufgerufen werden kann. Jetzt enthält this.props.onChange in Child die Ausgabemethode in der übergeordneten Klassenreferenz und Credits: Bits and Pieces
quelle
So mache ich es.
quelle
Die meisten der oben angegebenen Antworten beziehen sich auf React.Component-basierte Designs. Wenn Sie
useState
in den letzten Upgrades der React-Bibliothek verwenden, befolgen Sie diese Antwortquelle
quelle