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

控制台正在记录有关 key props 的错误，根据官方文档 (https://facebook.github.io/react/docs/lists-and-keys.html#keys)，我正在正确实施。

有趣的是，如果我删除 ReactCSSTransitionGroup 组件，只会出现列表中的第一项。如果我删除 key={}，所有三个都会出现（完成控制台错误）。

这是怎么回事？

目标是让函数循环遍历列表中的每个项目，并按照 ReactCSSTransitionGroup 的定义对其进行动画处理。

Answer 1

您需要为 ReactCSSTransitionGroup 组件而不是子 li 标签提供 key props。还在地图函数中使用索引参数来填充键。

这样的事情会起作用

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