Reactjs React js（单击时的动画）

我想知道当我点击react图标时，它应该旋转180度，当我[！[enter image description here][1][1]点击react js时，它应该旋转0度

---

➡

您可以使用css转换和转换。只需在图标组件中添加一个状态即可跟踪旋转与否

class RotateIcon extends Component {
    constructor(props) {
        this.state = {
          rotated: false
        };
    }

    onIconClicked = () => {
        this.setState({ rotated: !this.state.rotated });
    };

    render() {
      const degree = this.state.rotated ? '180' : '0';
      return (
         <Icon // Whatever your icon is called
           style={{
             transform: `rotate(${degree}deg)`,
             transition: 'transform 200ms linear' // update time here  
           }} 
           onClick={this.onIconClicked} 
         /> 
      );
    }
}

类旋转扩展组件{
建造师（道具）{
此.state={
旋转：假
};
}
onIconClicked=（）=>{
this.setState（{rotated:！this.state.rotated}）；
};
render（）{
const degree=this.state.rotated？'180'：'0'；
返回(
);
}
}

它不工作了。请在没有交易的情况下帮助我，请添加您在帖子中尝试的代码。那样会更容易帮助你