React - 如何讓 react-icon 旋轉 180 度 onClick？

Question

我有一個名為 Collapsible 的 React 組件，其中包含一個名為 FaArrowDown 的反應圖標。 每次用戶點擊時，如何讓圖標旋轉 180 度？ 我已經嘗試使用 state 讓它旋轉但沒有成功。 這是 Collapsible.js 的內容：

import React, { useState } from "react";
import styled from "styled-components";
import { FaArrowDown } from "react-icons/fa";
import './Collapsible.css'

export const ButtonWrapper = styled.div`
  font-size: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 25px;
  //transform: rotateX(180deg);

  &:hover {
    font-size: 30px;
  }
`

const Collapsible = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="collapsible">
      <ButtonWrapper className="toggle" >
        <h3 className="my_header" style={{paddingBottom: 25, fontSize: '20px', cursor: "pointer"}} >Best foods</h3>
        <FaArrowDown onClick={() => setIsOpen(!isOpen)} style={{cursor: "pointer", transition: "all 0.2s linear"}} />
      </ButtonWrapper>
      <div className={isOpen ? "content show" : "content"}>{props.children}</div>
    </div>
  );
};

export default Collapsible;

Answer 1

您可以使用樣式組件包裝您的圖標並使用 css 轉換：

// Wrap FaIcon in styled component
const StyledIcon = styled((props) => {
  <FaArrowDown {...props} />
})`
  cursor: pointer;
  transition: transform 0.3s ease-out;

  ${props => props.active && css`
    transform: rotate(180deg);
  `}

`;

// And use it like:
<StyledIcon onClick={() => setActive(!isOpen)} active={isOpen} />

Answer 2

您可以使用 styled-components 設置圖標的樣式，只需像這樣styled(FaArrowDown)將其傳遞給樣式化的 function ，然后在單擊 ButtonWrapper 時有條件地旋轉圖標。 我們跟蹤打開的 state 並將其作為道具傳遞給我們的切換圖標。 我們的代碼將如下所示：

Collapsible.styled.js

import styled from "styled-components";
import { FaArrowDown } from "react-icons/fa";

export const ButtonWrapper = styled.div`
  font-size: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 25px;

  &:hover {
    font-size: 30px;
  }
`

export const ToggleIcon = styled(FaArrowDown).attrs(
  (props) => ({})
)`
  color: rgb(77, 77, 77);
  font-size: 30px;
  position: relative;
  cursor: pointer;
  transition: transform 0.25s ease 0s;
  
  //Rotate the icon if active is true, that is when the icon is open

  ${(props) =>
    props.active &&
    `
      transform: rotate(180deg);
    `}
`;

可折疊.js

import React, { useState } from "react";
import { ButtonWrapper, ToggleIcon } from "./Collapsible.styled"

const Collapsible = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="collapsible">
      <ButtonWrapper className="toggle" onClick={() => setIsOpen(!isOpen)}>
        <h3 className="my_header" style={{paddingBottom: 25, fontSize: '20px', cursor: "pointer"}}>Best foods</h3>
        <ToggleIcon active={isOpen} />
      </ButtonWrapper>
      <div className={isOpen ? "content show" : "content"}>{props.children}</div>
    </div>
  );
};

export default Collapsible;