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

Question

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

这里是我的问题:我如何告诉react-transition-group新的ID属于旧的项，这样它就不会触发更新？

Answer 1

我对react- transition -group不是很熟悉，但我和其他库进行了转换。我想你现在用身份证做钥匙了。我将在数组中的对象中添加一个键字段。密钥应该是唯一的。您可以通过多种方式使其唯一，例如，使用计数器或uuid。我喜欢uuid。这样，如果您将时间id更改为最终的id，而密钥保持不变，则将不会有动画。

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

在转换中使用key，而不是id。

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