التحولات Requtjs - لماذا لا يعمل هذا؟

Question

أود أن أنقل عنصر واحد لأنه يتغير إلى عنصر آخر.

لدي 3 أمثلة:

• li> واحد يعمل، ولكنه يستخدم قائمة بالعناصر التي يتم الاحتفاظ بها (jsfiddle) لى>
• li> واحد لا يعمل، ويحافظ على عنصر واحد فقط حولها، اعتمادا على الحالة (JSfiddle)
• li> آخر واحد لا يعمل، والذي يحتفظ كلا النوعين حوله ويظهره (JSfiddle باستخدام إخفاء / عرض)

ما أريده هو الشكل الثاني، وهو تباين بسيط للغاية في المحاولة الأولى التي تعمل.

الخيار 1:

giveacodicetagpre.

الخيار 2: JSX التي لا تعمل، ولكنها أقرب إلى ما أرغب في القيام به (حقا، إخفاء عرض واحد، وإظهار آخر)

giveacodicetagpre.

الخيار 3: يستخدم إخفاء / إظهار للحفاظ على وجهات النظر 2 حولها، ولكن لا يزال لا يعمل.

giveacodicetagpre.

قصة طويلة جدا - كيف يمكنني تنفيذ عملية انتقالية على التبديل من "مكون" رئيسي إلى آخر؟ أنا لا أفهم لماذا يعمل الخيار 1، ولكن الخيار 2 لا!

Answer 1

تفاعل

هو تغيير محتوى DOM لأن هذا كل ما تغير.إعطاء العناصر مفاتيح فريدة لجعلها تحريك.

giveacodicetagpre.

jsfiddle

Answer 2

استخدمت إجابة michelle treys لحل مشكلة مماثلة باستخدام Rect-Router (1.0.1).ليس من الواضح من API أن هناك حاجة للمفتاح.كنت أتابع اقتراح Requer-Routers لتقديم طرق الأطفال في أحد الوالدين على النحو التالي:

giveacodicetagpre.

ومع ذلك، يتم تشغيل المكونات فقط على تحميل الصفحة.بعد حل ميشيل، استنسكت الأطفال وفقا لتحديثات React-Router وأضفوا مفتاحا على النحو التالي:

giveacodicetagpre.

شكرا على الإصلاح.هتافات