klucz elementu zmianie bez wyzwalania animację za pomocą reakcji przejściowy-group

głosy
0

Buduję UI, gdzie znajduje się lista elementów. Gdy użytkownik dodaje element, to wyśle ​​żądanie API, aby utworzyć nowy element, ale również dodać element do listy z tymczasowego identyfikatora. Gdy wraca API, zastąpi on identyfikator elementu z rzeczywistą ID od zaplecza. Problem polega na tym, że przy zmianie klucza elementu na liście, reagują-przejście-grupa będzie traktować go jako delecji / dodawania i wywołać animację.

Oto moje pytanie: Jak mogę zareagować-przejściowy grupę, że nowy identyfikator należy do starej pozycji, więc nie powoduje aktualizacji?

Utwórz 10/10/2019 o 00:55
źródło użytkownik
W innych językach...                            


1 odpowiedzi

głosy
0

Nie am zaznajomiony z reakcji, grupy przejściowej, ale się przejście z bibliotekami. Myślę, że można korzystać z innych pól na klucz nie tylko identyfikator. Więc chciałbym dodać kluczową pole do mojego obiektu w tablicy. Klucz powinien być unikalny. Można używać go rozwiązać wiele sposób na przykład za pomocą licznika lub UUID. Lubię UUID. W ten sposób można zmienić identyfikator czasowy do ostatecznej jeden, jeśli klucz pozostaje taka sama nie będzie animacja.

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

W czasie przejścia użyciu klucza zamiast id.

<TransitionGroup className="todo-list">
  {items.map(({ key, name }) => (
    <CSSTransition
      key={key}
      timeout={500}
      classNames="item"
    >
Odpowiedział 11/10/2019 o 10:37
źródło użytkownik

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