反应 CSSTransitionGroup 删除的项目转移到结束

Question

我正在使用 CSSTransitionGroup 插件来制作向数组中添加和删除项目的动画。添加时，动画按预期执行，但在移除时，移除的项目会在动画开始之前移动到末尾。我是 React 的新手，但我假设 React 如何协调数组更改的幕后发生了一些事情？

http://jsfiddle.net/alalonde/0kztn19d

Answer 1

由于 React 的 key 细节，您的删除语句出错。请参阅动态组件（您拥有的）的解释 here，以及如何将它们与“key”一起使用。

要修复，请将子映射中的 return 语句更改为：

return <Item key={item} item={item}/>;

并创建一个名为 <Item> 的新（纯）组件：

var Item = React.createClass({
  render: function() {
    return <div>{this.props.item}</div>;
  }
});

我在您的 fiddle 中试过了，它有效。希望 this link 会给你更新后的 fiddle。

顺便说一句：与 fiddle 一致，我的更改是快速而肮脏的解决方案：react 期望键是唯一的并且与列表中项目的内容相关。我的例子确实满足了第二个要求（请不要使用映射索引作为键），但它在第一个上失败了：如果你添加，然后删除，然后添加，示例代码将产生下一个具有相同编号的项目（不是唯一的），所以它失败了。

反应 CSSTransitionGroup 删除的项目转移到结束

React CSSTransitionGroup deleted item shifted to end

reactjs

reactcsstransitiongroup