React中如何实现点击react-icon图标后旋转180度

你只需要把isOpen状态和图标的旋转样式做绑定即可，之前的代码缺失了这层关联所以没有生效，修改方式如下： #

最简修改方案 #

直接给<FaArrowDown>的行内样式添加动态transform属性，修改后的代码片段：

<FaArrowDown 
  onClick={() => setIsOpen(!isOpen)} 
  style={{
    cursor: "pointer", 
    transition: "all 0.2s linear",
    // 新增这行绑定状态控制旋转
    transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
  }} 
/>

如果需要沿X轴旋转，把rotate换成rotateX即可。 #

体验优化建议 #

可以把点击事件绑定到外层的ButtonWrapper组件上，实现点击标题也能触发折叠/展开的效果，修改后完整代码：

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;
  cursor: pointer;

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

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'}} >Best foods</h3>
        <FaArrowDown 
          style={{
            transition: "all 0.2s linear",
            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
          }} 
        />
      </ButtonWrapper>
      <div className={isOpen ? "content show" : "content"}>{props.children}</div>
    </div>
  );
};

export default Collapsible;

更整洁的styled-components实现 #

你也可以把图标封装为独立的styled组件，避免行内样式堆积，示例：

// 定义带状态的图标组件，$前缀是styled-components约定的临时prop，不会透传到DOM
const ToggleIcon = styled(FaArrowDown)`
  cursor: pointer;
  transition: all 0.2s linear;
  transform: ${props => props.$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};
`

// 调用时直接传状态prop即可
<ToggleIcon $isOpen={isOpen} />

内容的提问来源于stack exchange，提问作者edwin