reactjs - react 旋转 Accordion 箭头 Onclick

Question

How can I rotate the arrows onclick

下面是我的 react 折叠代码，我想在点击时旋转折叠 Accordion 的箭头。

我正在使用 reactstrap 来构建它并为我的图标做出 fontawsome react

我还附上了一个 .GIF 链接来演示我的 Accordion 目前是如何工作的。

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;

Answer 1

Rotate svg 根据某些条件，例如col === 元素.id

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

在你的样式表上:

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