如何指定 ReactCSSTransitionGroup 中项目的顺序？

Question

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

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

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

是否可以告诉ReactCSSTransitionGroup（或ReactTransitionGroup）项目的顺序？

Answer 1

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/

如何指定 ReactCSSTransitionGroup 中项目的顺序？

How to specify the order of items in ReactCSSTransitionGroup?

reactjs

reactcsstransitiongroup