React CSSTransitionGroup删除的项目移至结尾 [英] React CSSTransitionGroup deleted item shifted to end

问题描述

我正在使用CSSTransitionGroup插件来动画化数组中项目的添加和删除.添加时，动画将按预期执行，但是在删除时，删除的项目会在动画开始之前移到末尾.我对React还是很陌生，但是我认为React如何协调数组的变化到底是怎么回事?

I'm using the CSSTransitionGroup addon to animate the addition and removal of items to an array. When adding, the animation performs as expected, but on remove the removed item is shifted to the end before the animation begins. I'm fairly new to React, butI assume there is something going on under the hood with how React reconciles array changes?

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

推荐答案

由于react的key细节，您的remove语句出错. 请参见动态组件的说明此处 )，以及如何将它们与键"配合使用.

Your remove statement goes wrong because of react's key specifics. See explanation here of dynamic components (which is what you have), and how to use them with 'key`.

要修复，请将子级映射内的return语句更改为:

To repair, change your return statement inside the mapping of children to:

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

并创建一个名为<Item>的新(纯)组件:

And create a new (pure) component called <Item>:

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

我在您的小提琴中尝试了此方法，并且有效.希望此链接将为您提供更新的小提琴.

I tried this in your fiddle and it works. Hopefully this link will give you the updated fiddle.

顺便说一句:与小提琴一样，我的更改是快速而又肮脏的解决方案:react期望键是唯一的，并且与列表中项目的内容相关.我的示例确实满足第二个要求(请不要使用映射索引作为键)，但是在第一个要求上失败:如果先添加，然后删除，然后添加，示例代码将产生具有相同编号的下一项(不是唯一的)，因此失败.

BTW: In line with fiddle, my changes are quick and dirty solution: react expects keys to be unique AND related to the content of the item in the list. My example does meet the second requirement (Please do NOT use the mapping index as the key), but it fails on the first: if you add, then delete, then add, the example code would produce a next item with the same number (not unique), so it fails.

这篇关于React CSSTransitionGroup删除的项目移至结尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！