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组件，则只显示列表中的第一项。如果我删除key = {}，则会显示所有三个（完成控制台错误）。

这里发生了什么？

目标是让函数循环遍历列表中的每个项目，并按照ReactCSSTransitionGroup的定义为其设置动画。

Answer 1

您需要为ReactCSSTransitionGroup组件提供关键道具，而不是子li标签。还要在map函数中使用index参数来填充键。

这样的东西会起作用

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

ReactJS关键道具不适用于CSS动画

1 个答案: