当前位置：首页 > React

react 实现手风琴

2026-01-27 16:30:05React

实现手风琴效果的方法

在React中实现手风琴效果可以通过状态管理和CSS动画结合完成。以下是两种常见实现方式：

使用useState管理展开状态

通过React的useState钩子控制每个手风琴项的展开/折叠状态：

react 实现手风琴

import React, { useState } from 'react';

const Accordion = ({ items }) => {
  const [activeIndex, setActiveIndex] = useState(null);

  const onTitleClick = (index) => {
    setActiveIndex(index === activeIndex ? null : index);
  };

  return (
    <div className="accordion">
      {items.map((item, index) => (
        <div key={item.title}>
          <div 
            className="accordion-title" 
            onClick={() => onTitleClick(index)}
          >
            {item.title}
          </div>
          <div className={`accordion-content ${
            index === activeIndex ? 'active' : ''
          }`}>
            {item.content}
          </div>
        </div>
      ))}
    </div>
  );
};

添加CSS过渡效果

配合CSS实现平滑的展开/折叠动画：

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-content.active {
  max-height: 500px; /* 根据实际内容调整 */
}

使用第三方库react-accessible-accordion

对于更复杂的场景，可以使用专门的手风琴组件库：

react 实现手风琴

npm install react-accessible-accordion

import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel,
} from "react-accessible-accordion";

<Accordion allowZeroExpanded>
  {items.map((item) => (
    <AccordionItem key={item.title}>
      <AccordionItemHeading>
        <AccordionItemButton>
          {item.title}
        </AccordionItemButton>
      </AccordionItemHeading>
      <AccordionItemPanel>
        {item.content}
      </AccordionItemPanel>
    </AccordionItem>
  ))}
</Accordion>

多级手风琴实现

对于嵌套结构的手风琴，可以递归渲染子项：

const NestedAccordion = ({ items }) => (
  <div className="accordion">
    {items.map((item) => (
      <div key={item.title}>
        <div className="accordion-title">{item.title}</div>
        <div className="accordion-content">
          {item.children && <NestedAccordion items={item.children} />}
        </div>
      </div>
    ))}
  </div>
);