React - 在组件道具更改时触发一个类[重复]答案

【问题标题】：React - trriger a class on component prop change [duplicate]React - 在组件道具更改时触发一个类[重复]
【发布时间】：2021-04-05 03:40:27
【问题描述】：

我的 React 组件中有以下代码：

if (props.catchData) {
    className = `${className} spinEffect`;
}

<img src={image} className={className}/>

虽然spinEffect 是一个简单的 CSS3 动画类：

.spinEffect {
    -webkit-animation: spin 0.6s 1 linear;
  }

  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
    }
    30% {
      -webkit-transform: rotate(80deg);
    }
    60% {
      -webkit-transform: rotate(-80deg);
    }
    100% {
      -webkit-transform: rotate(0deg);
    }
  }

每当catchData 属性发生变化时（只要它不为空），我都想进行一次“旋转”（重新应用课程）。目前，旋转类是第一次工作，但重新应用该类不会触发动画。

有什么想法吗？

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

要在每次catchData 更改时生成spin，您需要每次都重新渲染组件。你可以使用key props 来实现它。

<img key={props.catchData} src={image} className={className}/>

【讨论】：