Reactjs 在单击时反应旋转手风琴箭头

下面是我的react折叠代码，我想在单击折叠手风琴时旋转它的箭头

我正在使用reactstrap构建它，并为我的图标做出一些反应

我还附加了一个.GIF链接来演示我的手风琴目前的功能

import React, { Component } from "react";
import { Collapse, CardBody, Card, CardHeader } from "reactstrap";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const nested = [
  {
    id: 10,
    title:"Customer Queries"
  },
];

const Icon = <FontAwesomeIcon icon={faChevronDown} color={"#EB8C00" } />;
 
class Colapse extends Component {
  constructor(props) {
    super(props);
    this.tog = this.tog.bind(this);
    
    this.state = { 
      
      col: 0, 
      
  cards: [
    {
      id:1,
      title:"General information requests",
      sub_title:"Fault reports",
      body:"Something to display for body 1",
    },
    {
      id:2,
      title:"Account queries",
      sub_title:"Communication protocols",
      body:"Something to display for body 2",
    }
    ] };
  }

  tog(e) {
    let event = e.target.dataset.event;
    this.setState({
      col: this.state.col === Number(event) ? 0 : Number(event),
    });
  }


  render() {
    const { col, cards } = this.state;
 
    return (
      <div className="container collapse-container">
  

        

          {nested.map((element, index) => {
            return (
              <Card key={index} className="card rounded ">
        
                <CardHeader
                  className="card-header"
                  onClick={this.tog}
                  data-event={(index = element.id)}
                >
                  <p className="collapse d-flex">
                    <div className=" p-2 mr-auto font-weight-bold">
            <p className="">{element.title}</p>
                    </div>
                    <a
                      class="click-layer"
                      onClick={this.tog}
                      data-event={index}
                    ></a>
                  </p>
                </CardHeader>

                <Collapse isOpen={col !== index}>
                  <CardBody className="card-body">
                    <p className="card-text">Customer Queries relate to information, account or meter related faults reported by the customer.</p>
                    {/**HERE NESTED */}
                    {cards.map((index) => {
                      
                      return (
                        <Card key={index} className="card-sub rounded ">
                          <p className="card-header-sub" >{index.title}</p>
                          <CardHeader
                            className="card-header-sub"
                            onClick={this.tog}
                            data-event={index.id}
                          >
                            <p className="colle d-flex">
                              <div className="p-2 rotate">{Icon}</div>
                              <div className=" p-2 mr-auto font-weight-bold">
                      <p className="card-header-sub">{index.sub_title}</p>
                              </div>
                              <a
                                class="click-layer"
                                onClick={this.tog}
                                data-event={index.id}
                              ></a>
                            </p>
                          </CardHeader>

                          <Collapse isOpen={col === index.id}>
                            <CardBody className="card-body-sub">
                              <p className="card-text-body">{index.body}</p>
                            </CardBody>
                          </Collapse>
                        </Card>
                      );
                    })}
                    {/**End Of Nested */}
                  </CardBody>
                </Collapse>
              </Card>
            );
          })}
       
      </div>
    );
  }
}

export default Colapse;

import React，{Component}来自“React”；
从“reactstrap”导入{Collapse，CardBody，Card，CardHeader}；
从“@fortwome/free solid svg icons”导入{faChevronDown}”；
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}”；
常数嵌套=[
{
id:10，
标题：“客户查询”
},
];
常量图标=；
类Colapse扩展组件{
建造师（道具）{
超级（道具）；
this.tog=this.tog.bind（this）；
this.state={
上校：0，
卡片：[
{
id:1，
标题：“一般信息请求”，
子标题：“故障报告”，
body:“为body 1显示的内容”，
},
{
id:2，
标题：“账户查询”，
子标题：“通信协议”，
body:“要为body 2显示的内容”，
}
] };
}
tog（e）{
让event=e.target.dataset.event；
这是我的国家({
col:this.state.col==Number（事件）？0:Number（事件），
});
}
render（）{
const{col，cards}=this.state；
返回(
{nested.map（（元素，索引）=>{
返回(

{element.title}

客户查询与客户报告的信息、账户或仪表相关故障相关
{/**此处嵌套*/}
{cards.map（（索引）=>{
返回(
{index.title}

{Icon}
{index.sub\u title}

{index.body}
);
})}
{/**嵌套的结尾*/}
);
})}
);
}
}
导出默认Colapse；

根据某些条件，例如

col==element.id

<div className={`p-2 rotate ${col === element.id ? "isRotated" : ""}`}>{Icon}</div>

---

您可以分享类名rotate的功能吗？

.isRotated svg {
  transform: rotate(-90deg);
}