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コンポーネントを削除すると、リストの最初の項目だけが表示されます。私がキー= {}を取り除くと、3つすべてが表示されます（コンソールエラーが表示されます）。

ここでは何が起こっていますか？

目的は、関数をリスト内の各項目にループさせ、ReactCSSTransitionGroupで定義されているようにアニメーション化することです。

Answer 1

子のliタグではなくReactCSSTransitionGroupコンポーネントにキーのpropsを指定する必要があります。また、マップ関数内のインデックスパラメータを使用してキーを設定します。私は実際にはすでにReactCSSTransitionGroupに鍵をかけてみましたが、それはうまくいきませんでした - このような

何かが

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