ReactJS Zwei Komponenten kommunizieren
Ich habe gerade angefangen mit ReactJS und bin ein wenig festgefahren auf ein problem, das ich habe.
Meine Anwendung ist im wesentlichen eine Liste mit Filter und eine Schaltfläche, um das layout ändern.
Im moment bin ich mit drei Komponenten: <list />
, < Filters />
und <TopBar />
ist nun offensichtlich, wenn ich die Einstellungen in < Filters />
ich will trigger einige Methode in <list />
zu aktualisieren meiner Sicht.
Wie kann ich diese 3 Komponenten, die miteinander interagieren, oder brauche ich irgendeine Art von globalen Daten Modell wo ich nur änderungen an?
InformationsquelleAutor der Frage woutr_be | 2014-01-22
Du musst angemeldet sein, um einen Kommentar abzugeben.
Den besten Ansatz würde davon abhängen, wie Sie planen, ordnen Sie diese Komponenten. Ein paar Beispiel-Szenarien, die in den Sinn kommen jetzt:
<Filters />
ist eine untergeordnete Komponente von<List />
<Filters />
und<List />
sind Kinder von einer übergeordneten Komponente<Filters />
und<List />
Leben in eigenen root-Komponenten vollständig.Möglicherweise gibt es andere Szenarien, die ich denke nicht. Wenn dir nicht passt innerhalb dieser, dann lasst es mich wissen. Hier sind einige sehr grobe Beispiele, wie ich die Handhabung der ersten beiden Szenarien:
Szenario #1
Ihnen passieren könnte, eine Prozedur von
<List />
zu<Filters />
die dann aufgerufen werden, auf deronChange
Ereignis, filtern Sie die Liste mit dem aktuellen Wert.JSFiddle für #1 →
Szenario #2
Ähnlich wie in Szenario #1, aber die parent-Komponente wird der sein, der die Weitergabe über die handler-Funktion zu
<Filters />
und übergibt die gefilterte Liste zu<List />
. Diese Methode gefällt mir besser, da es entkoppelt die<List />
von der<Filters />
.JSFiddle für #2 →
Szenario #3
Wenn die Komponenten nicht kommunizieren kann zwischen jeglicher Art von Eltern-Kind-Beziehung, die die Dokumentation empfiehlt die Schaffung einer globalen event-system.
InformationsquelleAutor der Antwort Michael LaCroix
Gibt es mehrere Möglichkeiten, um Komponenten miteinander kommunizieren. Einige werden passend zu Ihrem Anwendungsfall. Hier ist eine Liste von einigen, die ich gefunden habe, nützlich zu wissen.
Reagieren
Eltern - /Kind-direkte Kommunikation
Hier der untergeordneten Komponente aufrufen, die einen Rückruf der Elternteil mit einem Wert, und die Eltern werden in der Lage sein, um den Wert zur Verfügung gestellt, die durch die Kinder in die Eltern.
Wenn Sie bauen eine Funktion/Seite Ihrer app, es ist besser, ein einzelner Elternteil die Verwaltung der Rückrufe/Zustand (auch als
container
odersmart component
), und alle childs zu Staatenlosen, nur reporting Dinge für die Eltern. Auf diese Weise können Sie einfach "teilen" der Stand der Eltern für alle Kinder, die es brauchen.Kontext
Reagieren Kontext erlaubt zu halten, Stand an der Wurzel Ihrer Hierarchie, und in der Lage sein zu injizieren diesem Zustand leicht in sehr tief geschachtelten Komponenten, ohne die Mühe zu haben, zu überliefern, props an alle zwischengeschalteten Komponenten.
Bis jetzt, der Kontext war ein experimentelles feature, aber eine neue API zur Verfügung, in Reagieren 16.3.
Den Verbraucher ist mit der render prop /Kinder Funktion Muster
Überprüfen Sie diese blog-post für mehr details.
Bevor Sie Reagieren 16.3, ich würde empfehlen, mit reagieren-broadcastdie bieten sehr ähnliche API und Nutzung ehemaliger Kontext-API.
Portale
Verwenden Sie eine portal-wenn Sie möchten, halten Sie 2-Komponenten eng zusammen, um Ihnen die Kommunikation mit einfachen Funktionen, wie in normalen Eltern - /Kind -, aber Sie wollen nicht diese 2 Komponenten zu haben, die eine Eltern/Kind-Beziehung in den DOM, denn der visuelle /CSS Zwänge impliziert (wie z-index, Deckkraft...).
In diesem Fall können Sie einen "portal". Es gibt verschiedene reagieren Bibliotheken mit Portalenormalerweise verwendet für modalspopups, tooltips,...
Folgendes:
Produzieren könnten folgende DOM gerendert innen
reactAppContainer
:Mehr details hier
Event bus
Wie gesagt in der Reagieren Dokumentation:
Gibt es viele Dinge, die Sie verwenden können, um die setup-ein-Ereignis-bus. Sie können einfach erstellen Sie ein array von Listener und event veröffentlichen, alle Hörer würden das Ereignis erhalten. Oder Sie können etwas wie EventEmitter oder PostalJs
Flux
Flux ist im Grunde ein event-bus, mit Ausnahme der Ereignis-Empfänger speichert. Dies ist ähnlich wie die basic-event-bus-system außer der Staat verwaltet außen Reagieren
Original Flux Umsetzung wirkt wie ein Versuch, das zu tun Event-sourcing in einer hacky Weg.
Redux ist für mich die Flux-Implementierung, ist die nächste event-sourcing, viele Vorteile von event-sourcing-Vorteile, wie die Fähigkeit, die Zeit-Reisen. Es ist nicht unbedingt verknüpft ist, zu Reagieren und kann auch verwendet werden, mit anderen funktionalen Sicht-Bibliotheken.
Eierkopf s Redux video-tutorial ist wirklich nett und erklärt, wie es intern funktioniert (es ist wirklich einfach).
Cursor
Cursor aus ClojureScript/Om und weit verbreitet in Projekte Reagieren. Sie ermöglichen die Verwaltung der staatlichen außen zu Reagieren, und lassen Sie mehrere Komponenten haben lese - /Schreibzugriff auf den gleichen Teil des Staates, ohne zu wissen, etwas über den Komponenten-Baum.
Viele Implementierungen vorhanden ist, einschließlich ImmutableJSReagieren-Cursor und Allwissend
Bearbeiten 2016: es scheint, dass die Menschen damit einverstanden Cursor funktionieren für kleinere apps, aber es ist nicht gut skalierbar auf komplexe apps. Om Nächste keinen Cursor mehr (während es Om, wurde das Konzept zunächst)
Elm Architektur
Den Elm-Architektur wird eine Architektur vorgeschlagen, die zur Verwendung durch die Elm Sprache. Auch wenn Elm nicht ReactJS, die Elm-Architektur getan werden kann in so gut Reagiert.
Dan Abramov, der Autor von Redux, hat ein Umsetzung der Elm-Architektur mit Reagieren.
Beide Redux und Elm sind wirklich toll und neigen dazu zu befähigen, event-sourcing-Konzepte, die auf dem frontend, sowohl Zeit-Reise-debugging, undo/redo, replay...
Den wichtigsten Unterschied zwischen Redux und Ulme, Elm neigen dazu, viel mehr strenge über die Staatliche Verwaltung. In Elm können Sie nicht lokale Komponente Staat oder mount/unmount-Haken und alle DOM-änderungen müssen sein, ausgelöst durch die Globale Zustand ändert. Elm-Architektur vorzuschlagen, die einen skalierbaren Ansatz, dass die Genehmigungen zu handhaben ALLE der Staat in einem einzigen unveränderlichen Objekt, während Redux vor, ein Ansatz, der lädt Sie zu behandeln MEISTEN des Staates in eine einzige, unveränderliche Objekt.
Während das konzeptionelle Modell Elm ist sehr elegant, und die Architektur ermöglicht die Skalierung auch auf großen apps, kann es in der Praxis schwierig sein, oder mit mehr boilerplate zu erreichen, einfache Aufgaben wie das geben konzentrieren, um eine Eingabe nach der Montage, oder die Integration mit einer vorhandenen Bibliothek mit einem Imperativ Schnittstelle (ie-JQuery-plugin). Im Zusammenhang mit Ausgabe.
Auch, Elm-Architektur umfasst mehr boilerplate-code. Es ist nicht so ausführlich oder kompliziert zu schreiben, aber ich denke, das Elm-Architektur ist besser geeignet für statisch typisierte Sprachen.
FRP
Bibliotheken, wie RxJS, BaconJS oder Kefir kann verwendet werden, um FRP-Datenströme zu handhaben, die Kommunikation zwischen den Komponenten.
Können Sie versuchen, zum Beispiel Rx-Reagieren
Ich denke, mit diesen libs ist ganz ähnlich wie mit dem, was die ELM-Sprache bietet mit Signale.
CycleJS framework nicht verwenden, ReactJS, aber nutzt vdom. Es haben viele ähnlichkeiten mit der Elm-Architektur (aber mehr ist einfach zu bedienen, im wirklichen Leben, weil es erlaubt, vdom Haken), und er nutzt RxJs ausgiebig statt von Funktionen und kann eine gute Quelle der inspiration, wenn Sie verwenden möchten GFK mit Reagieren. CycleJs Eierkopf videos sind nett um zu verstehen, wie es funktioniert.
CSP
CSP (Communicating Sequential Processes) sind derzeit beliebt (vor allem, weil der Go/goroutines und Kern.async/ClojureScript), aber Sie können Sie auch in javascript mit JS-LSP.
James Lange getan hat video erklären, wie es kann verwendet werden, Reagieren.
Sagen
Einer saga ist ein backend-Konzept, stammt aus dem DDD /EventSourcing /CQRS Welt, die auch als "Prozess-manager".
Es wird popularisiert durch die redux-saga Projekt, vor allem als Ersatz zu redux-thunk für die Handhabung von Nebenwirkungen, die ie-API-Aufrufe etc.). Die meisten Menschen, die derzeit denke, dass es nur Dienstleistungen, die für die Nebenwirkungen, aber es ist eigentlich mehr über die Entkopplung von Komponenten.
Ist es eher ein Kompliment, eine Flux-Architektur (oder wiedermal) als eine völlig neue Kommunikations-system, weil die saga emittieren Flux Aktionen am Ende. Die Idee ist, dass, wenn Sie widget1 und widget2, und Sie wollen, dass Sie voneinander getrennt werden, Sie können nicht feuern Aktion targeting-widget2 von widget1. Also macht Euch widget1 Feuer nur Aktionen, die den Gegner selbst, und die saga ist ein "hintergrund-Prozess" das hört sich für widget1-Aktionen, und können Versand-Aktionen, die den Gegner widget2. Die saga ist die Kopplung zwischen der 2 widgets, aber die widgets bleiben entkoppelt.
Wenn Sie interessiert sind, nehmen Sie einen Blick auf meine Antwort hier
Abschluss
Wenn Sie möchten, um zu sehen, ein Beispiel für die gleiche kleine app mithilfe dieser verschiedenen Stile, überprüfen Sie die Zweige dieses repository.
Ich weiß nicht, was ist die beste option, die langfristige, aber ich mag wirklich, wie Flux sieht aus wie event-sourcing.
Wenn du nicht weißt, event-sourcing-Konzepte, werfen Sie einen Blick auf dieses sehr pädagogisch blog: Drehen Sie die Datenbank inside out mit apache Samzaes ist ein muss Lesen zu verstehen, warum der Fluss ist schön (aber dies könnte von FRP)
Ich denke, die Gemeinschaft ist damit einverstanden, dass die vielversprechendsten Flux Umsetzung ist Reduxdie schrittweise ermöglichen sehr produktive Entwicklungsumgebung Dank der hot nachladen. Beeindruckend livecoding ala Bret Victor ' s Die Erfindung Grundsätzlich auf video ist möglich!
InformationsquelleAutor der Antwort Sebastien Lorber
Dies ist die Art, wie ich behandelt diese.
Lassen Sie uns sagen, Sie haben ein <select> für Monat und ein <select> für Tag.
Die Anzahl der Tage hängt von den ausgewählten Monat.
Beide Listen sind im Besitz einer Dritten Objekt, dem linken panel. Sowohl <select> sind auch die Kinder der leftPanel <div>
Es ist ein Spiel mit der Rückrufe und die Handler in der LeftPanel Komponente.
Um es zu testen, kopieren Sie einfach den code in zwei getrennte Dateien, und führen Sie die index.html. Dann wählen Sie einen Monat und sehen, wie die Anzahl der Tage ändert.
dates.js
Und das HTML für die Ausführung des linken panel-Komponente
index.html
InformationsquelleAutor der Antwort Skulas
Sah ich, dass die Frage bereits beantwortet, aber wenn Sie möchten, um mehr details zu erfahren, gibt es insgesamt 3 Fällen die Kommunikation zwischen den Komponenten:
InformationsquelleAutor der Antwort Kaloyan Kosev
Ausweitung Antwort von @MichaelLaCroix wenn ein Szenario ist, dass die Komponenten nicht kommunizieren kann zwischen jeglicher Art von Eltern-Kind-Beziehung, die Dokumentation empfiehlt die Schaffung einer globalen event-system.
Im Fall von
<Filters />
und<TopBar />
habe keine der oben genannten Beziehung, eine einfache Globale emitter verwendet werden könnte, wie diese:componentDidMount
- Abonnieren-EreigniscomponentWillUnmount
- Unsubscribe-eventReact.js und EventSystem-code
EventSystem.js
NotificationComponent.js
InformationsquelleAutor der Antwort tsuz
OK, es gibt nur wenige Möglichkeiten, es zu tun, aber ich exklusiv wollen, konzentrieren sich auf die Verwendung store mit Reduxdie um Ihr Leben viel einfacher für diese situation, anstatt geben Sie eine schnelle Lösung nur für diesen Fall, mit reinen Reagieren, wird am Ende ein Durcheinander in die wirklich große Applikation und die Kommunikation zwischen Komponenten wird härter und härter, als die Anwendung wächst...
Also, was Redux für Sie tut?
Redux ist wie lokalen Speicher in Ihrer Anwendung, die verwendet werden können, Wann immer Sie brauchen ein Daten verwendet werden, an verschiedenen Orten in Ihrer Anwendung...
Grundsätzlich Redux Idee kommt von flux ursprünglich, aber mit ein paar grundlegende änderungen, einschließlich Konzept mit einer Quelle der Wahrheit, indem nur einen store...
Blick auf die Grafik unten, um zu sehen, einige Unterschiede zwischen Flux und Redux...
Anzuwenden Redux in Ihrer Anwendung aus, die gestartet werden, wenn Ihre Anwendung muss die Kommunikation zwischen den Komponenten...
Auch diese Worte Lesen von Redux-Dokumentation könnte hilfreich sein, um mit zu beginnen:
InformationsquelleAutor der Antwort Alireza
Gibt es eine solche Möglichkeit, auch wenn Sie nicht Eltern - Kind-Beziehung - und das ist Flux. Es ist ziemlich gut (für mich persönlich) Durchführung für das genannte Alt.JS (mit Alt-Container).
Beispielsweise können Sie die Sidebar, die ist davon abhängig, was in Komponente Details. Komponente Sidebar ist verbunden mit SidebarActions und SidebarStore, während Details ist DetailsActions und DetailsStore.
Könnten Sie dann AltContainer wie
Welche halten würde-Shops (gut, könnte ich gebrauchen "speichern" statt "speichert" prop). Nun, {dies.Requisiten.Inhalte} Details, je nach route. Sagen wir, dass /Details Umleitung, die uns zu diesem Blick.
Details müssten zum Beispiel ein Kontrollkästchen, das würde sich ändern, Sidebar element von X nach Y, wenn es würde geprüft werden.
Technisch gibt es keine Beziehung zwischen Ihnen, und es wäre schwer zu tun, ohne Flussmittel. ABER MIT, DASS es ist eher einfach.
Nun zu DetailsActions. Wir schaffen es
und DetailsStore
Und nun, dies ist der Ort, wo die Magie beginnt.
Wie Sie sehen können gibt es bindListener zu SidebarActions.ComponentStatusChanged der verwendet wird, WENN setSiteComponent verwendet werden.
nun in SidebarActions
Haben wir so etwas. Es wird der Versand dieses Objekt auf Abruf. Und es wird aufgerufen, wenn setSiteComponent in speichern verwendet werden (Sie können in der Komponente, zum Beispiel während der onChange auf dem Button ot was auch immer)
Nun in SidebarStore wir haben
Jetzt hier Sie sehen können, wird es warten, bis DetailsStore. Was bedeutet es? mehr oder weniger bedeutet es, dass diese Methode müssen Sie warten, bis DetailsStoreto update, bevor Sie es aktualisieren können selbst.
tl;dr
Ein Geschäft ist das hören auf Methoden, die in einem Geschäft, und lösen eine Aktion aus Komponente handeln, die für die Aktualisierung seiner eigenen store.
Ich hoffe es kann dir irgendwie helfen.
InformationsquelleAutor der Antwort Shiroo
Wenn Sie wollen entdecken Möglichkeiten der Kommunikation zwischen Komponenten und das Gefühl, es wird immer schwerer und schwerer, dann könnten Sie erwägen, die Annahme eines guten design-Muster: Flux.
Es ist einfach eine Sammlung von Regeln, die bestimmt, wie Sie speichern und mutieren Anwendung breit Staat, und die Verwendung dieses Staates zu erbringen Komponenten.
Gibt es viele Flux-Implementierungen, und Facebook die offizielle Umsetzung ist einer von Ihnen. Obwohl es als das eine, enthält die meisten Häufig verwendeten code, aber es ist einfacher zu verstehen, da die meisten Dinge sind klar.
Einige Andere alternativen sind flummox fluxxor fluxible und redux.
InformationsquelleAutor der Antwort Kemal Dağ
Ich einmal war, wo Sie jetzt sind, als Anfänger haben Sie manchmal das Gefühl, fehl am Platz, wie die reagieren, die Möglichkeit, dies zu tun. Ich werde versuchen, zur Bewältigung der gleichen Weise, die ich denke, dass es jetzt.
Staaten sind die Eckpfeiler für die Kommunikation
In der Regel, worauf es ankommt ist die Art und Weise, Sie verändern den Staaten in dieser Komponente in Ihrem Fall Punkt aus drei Komponenten.
<List />
: Die wahrscheinlich-Anzeige einer Liste der Elemente, die je nach filter<Filters />
: Filter-Optionen, ändern Sie Ihre Daten.<TopBar />
: Liste der Optionen.Orchestrieren alle diese Interaktion, die Sie benötigen werden, um eine höhere Komponente, nennen wir es mal-App, das wird passieren-down-Maßnahmen und-Daten zu jeder dieser Komponenten, so zum Beispiel kann wie folgt Aussehen
So, wenn
setFilter
heißt es wirkt sich auf die filteredItem und neu Rendern beide Komponente;. In diesem Fall ist nicht ganz klar, ich habe dir ein Beispiel mit Kontrollkästchen, können Sie in einer einzigen Datei:InformationsquelleAutor der Antwort cabolanoz
Den folgenden code hilft mir, um das setup der Kommunikation zwischen zwei Geschwistern. Die Einrichtung ist in Ihrem übergeordneten Element während der render() und componentDidMount () - Aufrufe.
Es basiert auf https://reactjs.org/docs/refs-and-the-dom.html
Hoffe, es hilft.
InformationsquelleAutor der Antwort Sergei Zinovyev