Změna klíč položky bez vyvolání animaci pomocí reagovat přechodu-skupinu

hlasů
0

Stavím UI tam, kde je uveden seznam položek. Když uživatel přidá položku, odešle žádost o API k vytvoření nové položky, ale bude také přidat položku do seznamu s dočasným ID. Jakmile je API vrátí, nahradí ID položky se skutečným ID z backendu. Problém je v tom, že když se změnit klíč položky v seznamu, reagují-přechod-skupina zacházet jako delece / přidání a spustí animace.

Tady je moje otázka: Jak mohu říci reagovat-přechodu-skupinu, která nové číslo patří do staré položky, takže to není vyvolat aktualizaci?

Položena 10/10/2019 v 00:55
zdroj uživatelem
V jiných jazycích...                            


1 odpovědí

hlasů
0

Nejsem velmi dobře obeznámeni s reagovat přechodu skupiny, ale také přechod s ostatními knihovnami. Myslím, že můžete použít i jiné pole pro klíč není jen id. Takže bych přidat pole klíče do svého objektu v poli. Klíč by měl být jedinečný. Můžete použít řešit to více, jak například s protiproudem nebo UUID. Líbí se mi UUID. Tímto způsobem můžete změnit časové id ke konečnému jednoho, je-li klíč zůstává stejná nebude animace.

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

Při přechodu použít klíč, namísto id.

<TransitionGroup className="todo-list">
  {items.map(({ key, name }) => (
    <CSSTransition
      key={key}
      timeout={500}
      classNames="item"
    >
Odpovězeno 11/10/2019 v 10:37
zdroj uživatelem

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