css - ReactJS 关键 Prop 在 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>
)

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

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

这是怎么回事？

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

Answer 1

您需要向 ReactCSSTransitionGroup 组件提供关键 Prop 而不是子 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>
    )
}