Ich lerne Reagieren und verwende React-Router . Die App, die ich erstelle, ist eine App im mobilen Stil mit einem oberen Navigationsmenü und einem Inhaltsbereich darunter. Während ich auf den App-Seiten navigiere, möchte ich einen Seitentitel zur Menüleiste hinzufügen, um zu ermitteln, auf welcher Seite Sie gerade sind.
Meine Routen:
%Vor%HomePage.render:
%Vor%NavigationMenu.render:
%Vor%Die untergeordneten Pfade zu HomePage müssen ihren Titel basierend auf Inhalt festlegen, der von einem Ajax-Aufruf zurückgegeben wird.
Ich hatte gedacht, Callbacks zu jeder Route hinzuzufügen und Titel an die Elternklasse zurückzuleiten, die wiederum diese Daten an das NavigationMenu weitergeben könnte. Leider funktioniert das nicht: Während Sie durch die Seiten navigieren, ist die einzige Funktion, die wiederholt aufgerufen wird, rendern . Wenn Sie hier den Status setzen, wird ein Invariant Violation -Fehler ausgelöst.
Ich konnte dies mithilfe des React Flux -Musters lösen und mein App-Layout neu organisieren.
Titelkomponente:
%Vor%Seiten- / Inhaltskomponenten folgen dieser Struktur:
%Vor%Dies ermöglicht es Komponenten zu laden, einen Titel dynamisch zu setzen und nur die Titel-Komponente zu aktualisieren, wenn die App gut und fertig ist! Geschickt!
Wie Jeff Fairley oben vorgeschlagen hat, hilft die Verwendung von Reflux dabei, dieses Problem zu beheben (dieser Code verwendet ES6-Funktionen, daher wird ein Transpiler benötigt, um ihn auszuführen):
Titelaktionen
%Vor%TitleStore
%Vor%Navigationsmenü
%Vor%Meine Komponente
%Vor%Ziel ist es, einen reibungslosen unidirektionalen Datenfluss zu erhalten:
%Vor%Tags und Links reactjs react-router