使用 react-transition-group 在不触发动画的情况下更改项目的键

Question

我正在构建一个 UI，其中有一个项目列表。当用户添加一个项目时，它会发送一个 API 请求来创建一个新项目，但它也会将该项目添加到带有临时 ID 的列表中。一旦 API 返回，它将用后端的实际 ID 替换项目的 ID。问题是，当我更改列表中项目的键时，react-transition-group 会将其视为 deletion/addition 并触发动画。

这是我的问题：如何告诉 react-transition-group 新 ID 属于旧项目，因此它不会触发更新？

Answer 1

我对react-transition-group不是很熟悉，但是我用其他库做了transition。我认为你现在使用 id 作为密钥。我会在数组中的对象中添加一个键字段。密钥应该是唯一的。您可以通过多种方式使其独一无二，例如使用计数器或 uuid。我喜欢uuid。这样，如果您将时间 ID 更改为最后一个，并且键保持不变，则不会有动画。

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

在转换中使用密钥，而不是 ID。

<TransitionGroup className="todo-list">
  {items.map(({ key, name }) => (
    <CSSTransition
      key={key}
      timeout={500}
      classNames="item"
    >

使用 react-transition-group 在不触发动画的情况下更改项目的键

Change key of item without triggering animation using react-transition-group

reactjs

react-transition-group