在React.js中動畫新添加元素

我有一個反應組件，它使用ReactCSSTransitionGroup進行CSS轉換，並且我的服務器已啓動並運行了一個虛擬數據庫和一個API調用，該調用返回一個對象數組，然後測試的目的，我使用的setTimeout來查詢我的API網址：在React.js中動畫新添加元素

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 

var ItemsList = React.createClass({ 
    getInitialState: function() { 
     return { 
      items: [], 
      api: { 
       getItems: '/api/items' 
      } 
     } 
    }, 

    componentDidMount: function() { 
     this.fetchData(); 
    }, 

    fetchData: function() { 
     $.get(this.state.api.getItems, function(data) {    
      this.setState({ 
       items: data 
      }); 
      setTimeout(this.fetchData, 3000); 
     }.bind(this)); 
    }, 

    render: function() { 
     var items = this.state.items.map(function(item, index) { 
      return (
       <div className="title" key={index}>            
        {item.title}      
       </div> 
      ); 
     }.bind(this)); 
     return (
      <div className="content"> 
       <ReactCSSTransitionGroup transitionName="example"> 
        {items} 
       </ReactCSSTransitionGroup> 
      </div>  
     ); 
    } 
}); 

React.render(
    <ItemsList />, 
    document.querySelector('.react') 
);

而這裏的CSS：

.example-enter { 
    opacity: 0.01; 
} 

.example-enter.example-enter-active { 
    opacity: 1; 
    transition: opacity 2.5s ease-in; 
} 

.example-leave { 
    opacity: 1; 
} 

.example-leave.example-leave-active { 
    opacity: 0.01; 
    transition: opacity 2.5s ease-in; 
}

我想實現的是，每一次的項目被添加到陣列中，我想讓它動起來，但有一個條件 - 新的物品必須出現在t該列表的操作。

所以我在PHP中做了orderBy created_at DESC，它成功返回了所有的對象（按我想要的順序），但是React.js在最上面呈現新對象，然後爲最後一個元素動畫（即使它添加了一個新的一個在頂部）。

我在做什麼錯？ :(

來源

2015-07-20 Such Much Code

想通了

我不得不這樣做

<div className="title" key={item.id}>            
    {item.title}      
</div>

代替：

<div className="title" key={index}>            
    {item.title}      
</div>

因爲index來自一個數組，它改變每次添加的元素。

來源

2015-07-20 15:10:18

確保你的item.id是唯一的，但我確定它是;） –

在React.js中動畫新添加元素

回答

相關問題