Öğelerin sırasını ReactCSSTransitionGroup'da nasıl belirlenir?

Question

ReactCSSTransitionGroup ürünündeki öğelerin sırasını belirlemek mümkün müdür?

Siparişlerinin önemli olduğu öğelerin listesini düşünün. Bir öğeyi göstermek ve bir eylemle bitişik olarak gizlemek istiyorsanız, ReactCSSTransitionGroup siparişlerini karıştırır. Aşağıdaki fiddle bir göz atın, öğeleri [1, 2, 3, 4, 5] olması gerekiyordu.

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

o ReactCSSTransitionGroup (veya ReactTransitionGroup) öğelerin sırasını anlatmak mümkün mü?

Answer 1

ReactCSSTransitionGroup DOM'daki değişiklikleri yalnızca canlandırır, siparişe önem vermez. Durumunuz tek sayıdan çift sayıya değişir, tüm sayılarla sıralanmış dizi içerdiği zaman yoktur. İşte

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

: Eğer yöntemin işlemek sizin değiştirmeniz gerekir Bundan sonra

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

: Farklı bir şekilde animasyon amaçlı, geçici tasarruf eski öğeleri, böyle bir şey durumunu değiştirerek etrafında çalışabilirsiniz güncelleştirilmiş bir keman: http://jsfiddle.net/ny5La5ky/