Ich verwende in meiner Anwendung react-router und suche nach einer Möglichkeit, die erneute Bereitstellung von Komponenten zu stoppen, die sich bereits im DOM befinden. Zum Beispiel, wenn ich an der URL dashboard bin, dann werde ich eine assoziierte DashboardComponent gemountet haben. Wenn ich zu dashboard/settings übergehe, werden meine DashboardComponent sowie SettingsComponent erneut in das DOM eingebunden. Ich möchte eine saubere Möglichkeit finden, nur die untergeordneten Elemente der aktuellen URL zu mounten. Ist das möglich?
Router:
%Vor%Dashboard (übergeordnete Komponente):
%Vor% Hinweis: _ ist nur ein Wrapper für React.createFactory ()
"Reagieren" deaktiviert die Komponenten immer dann, wenn sich ihr key ändert - das ist der Zweck dieser Eigenschaft, um die "Identität" einer Komponente zu verwalten. Insbesondere ist es erforderlich, wenn Sie die CSS-Übergänge von React verwenden, da die einzige Möglichkeit, eine Komponente zu animieren und in einer anderen zu animieren, separate DOM-Knoten sind.
Weil Sie {key: this.context.router.getCurrentPath()} an die handler Komponente in App übergeben, wird React die handler Komponente unmounten und neu mounten, selbst wenn es vom selben Typ ist, gibt getCurrentPath() einen anderen Wert zurück. Die Lösung wäre, einen Schlüssel zu finden, der sich ändert, wenn animiert werden soll, aber ansonsten unverändert bleibt.
Tags und Links reactjs react-router