Reactjs-Übergänge - Warum funktioniert das nicht?
-
20-12-2019 - |
Frage
Ich würde gerne ein Element übergeben, wenn er sich in ein anderes Element ändert.
Ich habe 3 Beispiele:
- eine, die funktioniert, verwendet aber eine Liste von Elementen, die in der Umgebung gehalten werden (jsfiddle)
- eine, die nicht funktioniert, und hält nur einen Artikel in der Nähe, je nach Zustand (jsfiddle)
- Ein anderer, der nicht funktioniert, das beide Gegenstände um und verbirgt sie (JSFiddle mithülsen / Show)
was ich will, ist eher wie der zweite, was eine sehr geringfügige Variation des ersten Versuchs ist, der funktioniert.
Option 2: JSX, das nicht funktioniert, ist aber näher an dem, was ich gerne tun würde (wirklich, eine Ansicht verstecken, und zeigen Sie einen anderen)
generasacodicetagpre.Option 3: Verwendet Hide / Show, um die 2 Ansichten herumzuhalten, aber immer noch nicht funktioniert.
generasacodicetagpre.So lange Geschichte Kurz - Wie kann ich einen Übergang erstellen, wenn ich von einer Hauptkomponente der "Komponente" in einen anderen wechselt? Ich verstehe nicht, warum Option 1 funktioniert, aber Option 2 ist nicht!
Lösung
reagieren Sie nur den Inhalt des DOM, da das alles ist, was sich geändert hat.Geben Sie den Elementen eindeutige Schlüssel an, um sie animieren zu lassen.
generasacodicetagpre.Andere Tipps
Ich habe Michelle Treys Antwort verwendet, um ein ähnliches Problem mit dem Reaktionsrouter (1.0.1) zu lösen.Es ist nicht klar von der API, dass der Schlüssel benötigt wird.Ich folgte React-Router-Vorschlag, um Kinder in einem Elternteil wie folgt zu rendern:
generasacodicetagpre.Der Komponentalwillenter wird jedoch nur auf der Seitenlast ausgelöst.Nach der Lösung von Michelle klonte ich die Kinder gemäß den React-Router-Updates und fügte einen Schlüssel wie folgt hinzu:
generasacodicetagpre.Danke für den Fix.Prost