ReactCSSTransitionGroup में आइटम्स के ऑर्डर को कैसे निर्दिष्ट करें?

Question

क्या ReactCSSTransitionGroup में आइटमों का ऑर्डर निर्दिष्ट करना संभव है?

उन वस्तुओं की एक सूची पर विचार करें जिनके आदेश महत्वपूर्ण हैं। यदि आप एक आइटम दिखाना चाहते हैं और इसके आस-पास एक क्रिया के साथ छिपाना चाहते हैं, तो ReactCSSTransitionGroup उनके आदेश को भ्रमित कर देता है। निम्नलिखित पहेली देखें, आइटम [1, 2, 3, 4, 5] होना चाहिए।

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

यह ReactCSSTransitionGroup (या ReactTransitionGroup) वस्तुओं के अनुक्रम बताने के लिए संभव है?

Answer 1

ReactCSSTransitionGroup सिर्फ डोम में परिवर्तन को एनिमेट करता है, यह ऑर्डर की परवाह नहीं करता है। आपका राज्य अजीब से लेकर संख्याओं तक भी बदलता है, इसमें कोई पल नहीं होता है जब इसमें सभी संख्याओं के साथ क्रमबद्ध सरणी होती है। आप इसे चारों ओर, अस्थायी बचत एनीमेशन प्रयोजनों के लिए पुराने आइटम, ऐसा ही कुछ अलग तरीके से राज्य को संशोधित करके काम कर सकते हैं: यहाँ

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/