tepki-geçiş grubu kullanılarak animasyon tetiklemeden ürünün anahtar değiştirme

oy
0

Ben öğelerin bir listesi var bir UI inşa ediyorum. Kullanıcı bir ürün eklediğinde, yeni bir öğe oluşturmak için bir API isteği gönderir, ama aynı zamanda geçici bir kimlikle listeye öğe ekleyecektir. API geri gelir sonra, arka uç gerçek kimliğine sahip öğesinin kimliğini yerini alacak. Sorun listede ürünün anahtarı değiştirmek, reaksiyona geçiş grubu, bir silme / ek olarak tedavi etmek ve bir animasyon tetikleyecek olmasıdır.

İşte sorum: Nasıl tepki-geçiş-grup yeni kimlik eski öğeye ait söyleyebilir, bu nedenle bir güncelleme tetiklemez?

Oluştur 10/10/2019 saat 00:55
kaynak kullanıcı
Diğer dillerde...                            


1 cevaplar

oy
0

I-tepki geçiş grubu ile çok aşina değilim ama diğer kütüphanelerle geçiş yaptı. Sana anahtarın sadece kimliği için diğer alanları kullanabilirsiniz düşünüyorum. Bu yüzden dizide benim nesneye bir anahtar alan eklemek istiyorum. Anahtar benzersiz olmalıdır. Sen bunu bir sayaç veya uuid ile örneğin çoklu yol çözmek kullanabilirsiniz. Ben uuid severim. Anahtar aynı animasyon olacak kalırsa Bu şekilde, nihai birine zamansal id değiştirebilir.

const [items, setItems] = useState([
  { key: uuid(), id:'temporal id', name: 'name' },
  ...
]);

geçişte yerine id, anahtar kullanır.

<TransitionGroup className="todo-list">
  {items.map(({ key, name }) => (
    <CSSTransition
      key={key}
      timeout={500}
      classNames="item"
    >
Cevap 11/10/2019 saat 10:37
kaynak kullanıcı

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more