Reactjs-Übergänge - Warum funktioniert das nicht?

Question

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 1:

generasacodicetagpre.

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!

Answer 1

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.

jsfiddle

Answer 2

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