javascript - 如何以React JS内联样式动态更改动画值

Question

我发现了很多关于ReactJS内联样式的相关问题，但不适合我。

我需要根据 API 值(动态变化)更改 UI 中的动画速度(1、3、4、6、7 是我的动画速度)

我尝试了以下方法

<img className="fan1" src={fan1} style={{animation: "spin "`${2}`"s linear infinite" }}></img>    
<img className="fan1" src={fan1} style={{animation: "spin ${2}s linear infinite" }}></img>
<img className="fan1" src={fan1} style={{animation: `spin {2}s linear infinite` }}></img>
<img className="fan1" src={fan1} style={{animation: {spin {2}s linear infinite} }}></img>

我不知道如何实现这一目标。请帮帮我。

Answer 1

这对我有用

<img className="fan1" 
      src={fan1}
      style={{ animation: `spin ${5}s linear infinite` }}
      alt="fan"
  ></img>