React - 如何使反应图标在点击时旋转 180 度？答案

【问题标题】：React - How to make react-icon rotate 180 degrees onClick?React - 如何使反应图标在点击时旋转 180 度？
【发布时间】：2021-10-12 17:57:56
【问题描述】：

我有一个名为 Collapsible 的 React 组件，其中包含一个名为 FaArrowDown 的 react-icon。每次用户点击时，如何让图标旋转 180 度？我已经尝试使用状态使其旋转但没有成功。这是 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;

【问题讨论】：

这能回答你的问题吗？ How to click an image and make a rotation
这很简单，您只需要维护一个状态（例如 rotate ）并在 Click 上将其更改为 true false。如果为 true 添加 css 变换：rotate(180deg)

标签： javascript css reactjs use-state

【解决方案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} />

【讨论】：