React可折叠面板组件点击切换图标的实现问题求助

问题核心是你没有根据折叠面板的展开状态控制图标的显示隐藏，导致两个图标始终存在于DOM中，点击后会同时显示。以下是两种可行的解决方式：

方法1：条件渲染图标 #

利用React条件渲染，根据isExpanded状态只渲染对应状态的图标：

import { useState } from 'react';
import styled from 'styled-components';
// 替换成你实际使用的图标组件
import ArrowRightIcon from './icons/ArrowRight';
import ArrowDownIcon from './icons/ArrowDown';

const AccordionHeader = styled.button`
  display: flex;
  align-items: center;
  justify-content: space-between;
  // 你的其他样式
`;

const AccordionContent = styled.div`
  max-height: ${props => props.isExpanded ? '1000px' : '0'};
  overflow: hidden;
  transition: max-height 0.3s ease;
`;

const Accordion = ({ title, children }) => {
  // 用useState跟踪展开状态
  const [isExpanded, setIsExpanded] = useState(false);

  const handleToggle = () => {
    setIsExpanded(prev => !prev);
  };

  return (
    <div>
      <AccordionHeader onClick={handleToggle}>
        <span>{title}</span>
        {/* 根据状态切换图标 */}
        {isExpanded ? <ArrowDownIcon /> : <ArrowRightIcon />}
      </AccordionHeader>
      <AccordionContent isExpanded={isExpanded}>
        {children}
      </AccordionContent>
    </div>
  );
};

export default Accordion;

方法2：通过Styled-Components Props控制显示 #

如果需要保留两个图标的DOM节点，可通过styled-components的props控制显示/隐藏：

import { useState } from 'react';
import styled from 'styled-components';
import ArrowRightIcon from './icons/ArrowRight';
import ArrowDownIcon from './icons/ArrowDown';

const AccordionHeader = styled.button`
  display: flex;
  align-items: center;
  justify-content: space-between;
`;

const IconWrapper = styled.span`
  display: ${props => props.$visible ? 'inline-block' : 'none'};
`;

const Accordion = ({ title, children }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  const handleToggle = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div>
      <AccordionHeader onClick={handleToggle}>
        <span>{title}</span>
        <IconWrapper $visible={!isExpanded}>
          <ArrowRightIcon />
        </IconWrapper>
        <IconWrapper $visible={isExpanded}>
          <ArrowDownIcon />
        </IconWrapper>
      </AccordionHeader>
      {isExpanded && <div>{children}</div>}
    </div>
  );
};

export default Accordion;

关键要点 #

• 必须用useState维护折叠状态，确保点击时状态正确切换
• 图标显示逻辑完全依赖isExpanded状态，避免同时渲染两个可见图标

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