ReactJS关键道具在CSS动画中不起作用

我有一个简单的对象，其中包含一些细节，使用JS map（）函数循环和输出

请参见此处的代码笔：

需要注意的是：

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

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

    </ReactCSSTransitionGroup>
)

返回(
{person.name}，{person.age}
)

控制台记录了一个关于关键道具的错误，根据官方文档（）我正确地实现了这个错误

有趣的是，如果我删除ReactCSTranssitionGroup组件，则只会显示列表中的第一项。如果我删除了key={}，这三个键都会出现（包括控制台错误）

这是怎么回事

---

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

您需要为ReactCSStransitongGroup组件提供关键道具，而不是子li标记。还可以在映射函数中使用索引参数来填充键

像这样的东西会有用的

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

peopleList.map（函数（人物、索引）{
返回(
{person.name}，{person.age}
)
}

您需要为ReactCSTransanitionGroup组件而不是子li标记提供键道具。还需要在映射函数中使用索引参数来填充键

像这样的东西会有用的

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

peopleList.map（函数（人物、索引）{
返回(
{person.name}，{person.age}
)
}

谢谢Khang-我实际上已经尝试将密钥应用于ReactCSTransanitonGroup，但没有成功。我已经更新了代码笔以反映更改，请随意使用。我可以在您更新的代码笔链接中看到它正在工作。三个li会慢慢淡入。这不是您想要实现的吗？如果您需要让它一个一个地淡入。CSS本身无法将其剪切，因为无法告知前一个组件的转换是否完成。是的。我现在正在查看React Motion（）。我无法通过转换组实现这一点，这是多么令人失望。谢谢。您可以试着为每个组件提供状态，并对每个组件使用setTimeout（在componentWillMount中）基于索引号。谢谢Khang-我实际上已经尝试将密钥应用于ReactCSTransanitionGroup，但它不起作用。我已经更新了代码笔以反映更改，请随意使用。我可以在更新的代码笔链接中看到它起作用。三个li慢慢淡入。这不是你想要实现的吗？你需要一个不同的如果你想让它一个接一个地淡入，请使用nt方法。单凭CSS无法将其剪切，因为无法告知前一个组件的转换是否完成。是的。我现在正在查看React Motion（）。我无法通过转换组实现这一点，这是多么令人失望。谢谢。你可以尝试给出每个组件的状态，并对每个组件使用setTimeout（在componentWillMount中）基于索引号。