Javascript React仅为单击的元素提供动画

我希望在点击按钮后添加微调器动画，当得到响应时，微调器应该消失。到目前为止效果还不错，但问题是我渲染了一个包含许多元素的列表，每个元素都有自己的删除按钮，当单击其中一个时，动画会添加到列表的所有元素中。我希望它只出现一次，在列表中这个特定的单击元素旁边

 const displayCertificateList = (
  classes,
  mainStatus,
  handleDeleteSingleCertificate,
  animateDelete 
) => {
    return mainStatus.map((el, i) => {
      return (
        <div className={classes.certificatesListContainer} style={{border:'none'}}>
          <List key={i} style={{padding: '10px'}}>
            <ListItem style={{ padding: "0 0 0 20px" }}>
              <ListItemText
                className={classes.certificatesList}
                primary={
                  <Typography type="body2" style={{ fontWeight: "bold" }} className={classes.certificatesListFont}>
                    Valid until:
                  </Typography>
                }
                secondary={
                  <Typography
                    type="body2"
                    className={classNames(
                      classes.certificatesListSecondArgument,
                      classes.certificatesListFont,
                      el.expiresIn > 90 ? classes.green : classes.red
                    )}
                  >
                    {el.validUntil.slice(0,9)} ({el.expiresIn} days)
                  </Typography>
                }
              />
            </ListItem>
          </List>
          <div className={classes.certificatesBtn}>
            <Button
              variant="contained"
              size="small"
              color="secondary"
              className={classes.button}
              onClick={() => {
                if (
                  window.confirm(
                    `Are you really sure?
                  )
                )
                  handleDeleteSingleCertificate(el, i);
              }}
            >
              <DeleteIcon className={classes.leftIcon} />
              Delete
            </Button>
            <div style={{left: '-50%',top: '30%'}} className={classNames(animateDelete ? classes.spinner : null)}></div>
          </div>
        </div>
      );
    });
  } else {
    return (
      <div>
        <Typography component="h1" variant="h6">
          The applet is not innitialized, please initialize it first
        </Typography>
      </div>
    );
};

然后像这样传递：

        {this.state.view === 'certificates' && this.state.certificates && displayCertificates(classes, fakeData, this.handleDeleteSingleCertificate,  this.state.animatingDelete)}

---

在我看来，最好使用count而不是

animatingDelete

来标记。单击“删除”按钮时可以加1，单击完成后可以减1。当计数等于0时，隐藏旋转，否则显示它。

我建议将

displayCertificateList

函数组件设置为有状态组件，并将

animatingDelete

存储在其中-`因为它实际上是特定项目的状态

类ListItem扩展了React.Component{
状态={
isDeleting:错误
}
handleDelete=（）=>{
const{onDelete，id}=this.props；
onDelete（id）；
这是我的国家({
isDeleting：是的
})
}
render（）{
const{isDeleting}=this.state；
返回(

删除{isDeleting&&'（微调器）}

)
}
}
类列表扩展了React.Component{
状态={
清单项目：[
{id:1}，
{id:2}
]
}
handleDelete=id=>{
console.log（'delete'+id）；
//在此处执行异步操作并从状态中删除该项
}
render（）{
const{listItems}=this.state；
返回(

{listItems.map（{id}）=>(
))}

)
}
}
ReactDOM.render（，document.getElementById（'root'））

嗯，但我不明白它会改变什么？我的意思是动画已经出现在点击和消失时得到响应。问题是，我使用多个元素渲染列表，单击任意按钮后，该微调器会立即出现在每个按钮旁边。我希望它只出现在单击的按钮旁边谢谢你的消息，但即使它是有状态的组件，如何控制为列表中的这个特定元素提供动画？由于我不存在通过组件传递数据的问题，问题是如何使其无法在所有元素上一次显示，并且仅在单击的元素上显示你好，我已经实现了我的想象框架，请看一看。
        {this.state.view === 'certificates' && this.state.certificates && displayCertificates(classes, fakeData, this.handleDeleteSingleCertificate,  this.state.animatingDelete)}