React手风琴组件标题点击切换图标功能实现求助

核心思路 #

通过手风琴项的展开状态条件渲染activeIcon和inactiveIcon，确保点击仅触发当前项的状态切换，进而切换对应图标。

单个手风琴项实现 #

如果是单个独立的手风琴组件，直接在内部维护展开状态：

import { useState } from 'react';

const Accordion = ({ title, inactiveIcon, activeIcon, children }) => {
  // 维护当前手风琴的展开状态
  const [isExpanded, setIsExpanded] = useState(false);

  // 点击标题切换状态
  const toggleAccordion = () => {
    setIsExpanded(prevState => !prevState);
  };

  return (
    <div>
      {/* 标题区域，绑定点击事件 */}
      <div onClick={toggleAccordion}>
        <span>{title}</span>
        {/* 根据状态切换图标 */}
        {isExpanded ? activeIcon : inactiveIcon}
      </div>
      {/* 根据状态控制内容显示 */}
      {isExpanded && <div>{children}</div>}
    </div>
  );
};

export default Accordion;

多手风琴项（仅展开一个）实现 #

如果需要点击一个展开、其他收起的效果，将状态提升到父组件统一管理：

import { useState } from 'react';

const AccordionGroup = ({ items }) => {
  // 记录当前展开的项索引，null表示全部收起
  const [expandedIndex, setExpandedIndex] = useState(null);

  const toggleAccordion = (index) => {
    // 点击已展开的项则收起，否则展开该项
    setExpandedIndex(prevIndex => prevIndex === index ? null : index);
  };

  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>
          <div onClick={() => toggleAccordion(index)}>
            <span>{item.title}</span>
            {/* 匹配当前索引切换图标 */}
            {expandedIndex === index ? item.activeIcon : item.inactiveIcon}
          </div>
          {expandedIndex === index && <div>{item.children}</div>}
        </div>
      ))}
    </div>
  );
};

// 使用示例
const App = () => {
  const accordionItems = [
    {
      title: "标题1",
      inactiveIcon: <span>↓</span>, // 替换成你的图标组件/元素
      activeIcon: <span>↑</span>,
      children: <p>手风琴内容1</p>
    },
    {
      title: "标题2",
      inactiveIcon: <span>↓</span>,
      activeIcon: <span>↑</span>,
      children: <p>手风琴内容2</p>
    }
  ];

  return <AccordionGroup items={accordionItems} />;
};

关键注意点 #

• 单个手风琴项自行维护状态，多个项通过索引区分，确保点击事件仅影响当前项
• 图标支持任意JSX元素（SVG组件、图标库组件、普通标签均可），直接传入即可
• 状态切换逻辑简洁：单个项取反状态，多个项判断索引是否匹配

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