React ReactCSSTransitionGroup將新項目添加到動畫列表頂部？

Question

我一直在尋找一個將項目添加到具有反應的項目的示例，並且讓它爲新添加的項目添加動畫，但不添加到列表的末尾，而是列表的開始。我發現了這個例子，但是我在本地和在線完成了所有的混亂事情，當我將它添加到數組中的第一個位置時，我看起來似乎無法將該項目設置爲動畫。這是一個簡單的反應待辦事項添加項目。我怎樣才能讓物品添加到第一個位置，並將動畫移動到第一個位置？

JS小提琴：http://jsfiddle.net/kb3gN/13152/

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 

var TodoList = React.createClass({ 
    getInitialState: function() { 
    return {items: ['hello', 'world', 'click', 'me']}; 
    }, 
    handleAdd: function() { 
    var newItems = 
     this.state.items.concat([prompt('Enter some text')]); 
    this.setState({items: newItems}); 
    }, 
    handleRemove: function(i) { 
    var newItems = this.state.items; 
    newItems.splice(i, 1) 
    this.setState({items: newItems}); 
    }, 
    render: function() { 
    var items = this.state.items.map(function(item, i) { 
     return (
     <TodoItem item={item} key={item} onClick={this.handleRemove.bind(this,  i)}/> 
    ); 
    }.bind(this)); 
    return (
     <div> 
     <div><button onClick={this.handleAdd}>Add new</button></div> 
     <ReactCSSTransitionGroup transitionName="example"> 
      {items} 
     </ReactCSSTransitionGroup> 
     </div> 
    ); 
    } 
}); 

React.render(<TodoList/>, document.getElementById('list')); 

Answer 1

你的問題是你附加到你的待辦事項列表。如果添加到前面，則生成的動畫就是您要查找的內容。

更改handleAdd到：

handleAdd: function() { 
    var newItems = this.state.items; 
    newItems.unshift([prompt('Enter some text')]); 
    this.setState({items: newItems}); 
}, 

的關鍵點是使用unshift，而不是push。瀏覽mdn docs瞭解差異