Wie wird die Reihenfolge der Elemente in ReactCSSTransitionGroup festgelegt?

Question

Ist es möglich, die Reihenfolge der Artikel in einer ReactCSSTransitionGroup anzugeben?

Betrachten Sie eine Liste von Elementen, deren Reihenfolge wichtig ist. Wenn Sie ein Element anzeigen und sein benachbartes mit einer Aktion ausblenden möchten, verwirft ReactCSSTransitionGroup ihre Reihenfolge. Schau dir die folgende Geige an, die Artikel sollen [1, 2, 3, 4, 5] sein.

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

Ist es möglich, ReactCSSTransitionGroup zu sagen (oder ReactTransitionGroup) die Reihenfolge der Artikel?

Answer 1

Die ReactCSSTransitionGroup animiert nur Änderungen im DOM, es kümmert sich nicht um die Reihenfolge. Ihr Zustand ändert sich von ungeraden zu geraden Zahlen. Es gibt keinen Zeitpunkt, an dem ein sortiertes Array mit allen Zahlen enthalten ist. Sie können es umgehen, indem Staat in anderer Weise, zum temporären Speichern alte Elemente für die Animation Zwecke zu modifizieren, so ähnlich:

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

Danach, Sie ändern müssen, um Ihre Methode machen:

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

Hier ist eine aktualisierte Geige: http://jsfiddle.net/ny5La5ky/