ReactCSSTransitionGroupのアイテムの順序を指定する方法は？

Question

ReactCSSTransitionGroupのアイテムの順序を指定することはできますか？

注文が重要な項目のリストを検討してください。 1つのアイテムを表示し、1つのアクションで隣接アイテムを非表示にしたい場合は、ReactCSSTransitionGroupはその順序を混乱させます。次のようなフィドルを見て、項目は[1, 2, 3, 4, 5]であるはずです。

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

それはReactCSSTransitionGroup（またはReactTransitionGroup）の項目の順序を伝えることは可能ですか？

Answer 1

ReactCSSTransitionGroupはDOMの変更をアニメーション化するだけで、順序は気にしません。あなたの状態は奇数から偶数に変わります。すべての数字を含むソートされた配列が含まれている瞬間はありません。ここで

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> 
); 
} 

：、あなたが方法をレンダリングあなた変更する必要があります。その後

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: [] 
    }) 
    }); 
} 

：あなたは別の方法でアニメーションの目的のために、一時退避古いアイテム、そのようなことを状態を変更することでそれを回避することができます更新されたフィドルです：http://jsfiddle.net/ny5La5ky/