ReactJS關鍵支柱不工作在CSS動畫

Question

我有一個簡單的對象，其中一些細節，其中使用JS map（）函數循環和輸出。

這裏查看Codepen：http://codepen.io/matt5409/pen/YpeBWd?editors=0111

位需要注意的是：

return(
    <ReactCSSTransitionGroup 
     transitionName="example" 
     transitionAppear={true} transitionAppearTimeout={1000} 
     transitionEnter={false} transitionLeave={false}> 

    <li key={person.toString()}>{person.name}, {person.age}</li> 

    </ReactCSSTransitionGroup> 
) 

該控制檯記錄有關的關鍵道具，其中，根據我在執行官方文檔（https://facebook.github.io/react/docs/lists-and-keys.html#keys）錯誤正確。

有趣的是，如果我刪除了ReactCSSTransitionGroup組件，則只有列表中的第一項出現。如果我刪除密鑰= {}，所有三個出現（完成與控制檯錯誤）。

這是怎麼回事？

目標是讓函數遍歷列表中的每個項目，並按照ReactCSSTransitionGroup的定義對其進行動畫處理。

Answer 1

您需要爲ReactCSSTransitionGroup組件而不是子li標籤提供關鍵的道具。在map函數中使用索引參數來填充密鑰。

像這樣的事情會工作

peopleList.map(function(person, index){ 
    return(
     <ReactCSSTransitionGroup 
      key={index} 
      transitionName="example" 
      transitionAppear={true} transitionAppearTimeout={1000} 
      transitionEnter={true} 
      transitionEnterTimeout={1000} 
      transitionLeave={true} 
      transitionLeaveTimeout={1000} 
     > 

     <li key={index}>{person.name}, {person.age}</li> 
    ) 
}