反应旋转手风琴箭头 Onclick

Posted 2023-03-23

【中文标题】反应旋转手风琴箭头 Onclick

【英文标题】：React Rotate Accordion Arrow Onclick

【发布时间】：2020-12-18 23:06:14

【问题描述】：

How can I rotate the arrows onclick

这是我的反应崩溃代码，我想在点击时旋转折叠手风琴的箭头。

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

我还附上了一个 .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;

【问题讨论】：

你能分享一下className rotate的作用吗？

【参考方案1】：

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

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

在您的样式表上：

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