Változás kulcsfontosságú elem aktiválása nélkül animáció segítségével reagálni átmenet-csoport

szavazat
0

Építek egy UI, ahol van egy lista a terméket. Amikor a felhasználó hozzáad egy elemet, akkor küldjön egy API kérés egy új elemet, de azt is hozzá az elemet a lista egy ideiglenes azonosítót. Miután az API jön vissza, akkor cserélje ki az ID a tárgy a tényleges azonosítót a háttérben. A probléma az, hogy mikor változik meg a gombot az elem a listában, reagál-átmenet-csoport úgy kezeli, mint egy törlés / hozzáadás és elindítanak egy olyan animációt.

Itt a kérdés: Honnan tudhatom, hogy reagáljon az átmenet-csoport, amely az új azonosító nem tartozik a régi elem, így nem azonnali frissítés?

A kérdést 10/10/2019 00:55
a forrás felhasználó
Más nyelveken...                            


1 válasz

szavazat
0

Én nem nagyon ismeri reagálnak átmenet-csoport, de tettem átmenet más könyvtárakkal. Azt hiszem, akkor más területeken kulcsfontosságú nem csak az id. Tehát hozzátenném kulcs mezőt célom a tömbben. A kulcs egyedinek kell lennie. Használhatja megoldani több módon például egy számláló vagy uuid. Szeretem uuid. Így meg lehet változtatni a temporális id a végleges, ha a kulcs ugyanaz marad nem lesz animáció.

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

Az átmenet a kulcsot használja, ahelyett, hogy az id.

<TransitionGroup className="todo-list">
  {items.map(({ key, name }) => (
    <CSSTransition
      key={key}
      timeout={500}
      classNames="item"
    >
Válaszolt 11/10/2019 10:37
a forrás felhasználó

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