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

Question

我正在使用CSSTransitionGroup插件为数组添加和删除项目设置动画。添加时，动画按预期执行，但在删除时，删除的项目在动画开始之前移动到末尾。我对 React 还很陌生，但我认为 React 如何协调数组更改的幕后发生了一些事情？

score 1 · Accepted Answer

key由于反应的具体情况，您的删除语句出错了。请参阅此处对动态组件（这是您所拥有的）的解释，以及如何将它们与“key”一起使用。

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

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

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

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

我在你的小提琴中试过这个，它有效。希望这个链接会给你更新的小提琴。

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

1 回答 1