React CSSTransitionGroup已删除项目已移至结束

Question

我正在使用CSSTransitionGroup插件来动画添加和删除数组中的项目。添加时，动画将按预期执行，但在删除时，删除的项目将在动画开始前移至结尾。我对React很新，但是我认为React如何协调数组更改会引发一些问题？

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

Answer 1

由于反应的key细节，您的删除声明出错了。 请参阅动态组件的解释here（这是您拥有的），以及如何将它们与＆＃39; key`一起使用。

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

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

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

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

我在你的小提琴中试过这个并且它有效。希望this link会给你更新的小提琴。

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