gpt4 book ai didi

reactjs - 如何指定 ReactCSSTransitionGroup 中项目的顺序?

转载 作者:行者123 更新时间:2023-12-03 13:30:59 24 4
gpt4 key购买 nike

是否可以指定 ReactCSSTransitionGroup 中项目的顺序?

考虑一个其顺序很重要的项目列表。如果您想通过一个操作显示一项并隐藏其相邻项,ReactCSSTransitionGroup 会混淆它们的顺序。看看下面的 fiddle ,项目应该是[1, 2, 3, 4, 5]

http://jsfiddle.net/mehranziadloo/kb3gN/15519/

是否可以告诉 ReactCSSTransitionGroup(或 ReactTransitionGroup)项目的顺序?

最佳答案

ReactCSSTransitionGroup 只是对 DOM 中的变化进行动画处理,它不关心顺序。您的状态从奇数变为偶数,没有任何时刻它包含包含所有数字的排序数组。您可以通过以不同方式修改状态来解决这个问题,临时保存旧项目用于动画目的,如下所示:

switch: function() {
var newItems;
if (this.state.items[0] % 2 !== 1) {
newItems = [1, 3, 5];
}
else {
newItems = [2, 4];
}
this.setState({
items: newItems,
previousItems: this.state.items
}, function() {
this.setState({
previousItems: []
})
});
}

之后,您需要修改渲染方法:

render: function() {
var currentItems = this.state.items.concat(this.state.previousItems).sort();
var items = currentItems.map(function(item, i) {
return (
<div key={item}>
{item}
</div>
);
}.bind(this));
return (
<div>
<button onClick={this.switch}>Switch</button>
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
{items}
</ReactCSSTransitionGroup>
</div>
);
}

这是更新的 fiddle :http://jsfiddle.net/ny5La5ky/

关于reactjs - 如何指定 ReactCSSTransitionGroup 中项目的顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38193610/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com