当前位置：首页 > React

react实现折叠组件

2026-01-27 03:43:39React

实现折叠组件的基本思路

使用React实现折叠组件可以通过状态管理控制内容的显示与隐藏。常见的实现方式包括利用useState钩子管理展开/折叠状态，结合CSS过渡效果实现平滑动画。

基础实现代码示例

import React, { useState } from 'react';

const Collapse = ({ title, children }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        {title} {isOpen ? '▲' : '▼'}
      </button>
      {isOpen && <div>{children}</div>}
    </div>
  );
};

export default Collapse;

添加CSS过渡动画

通过max-height和transition属性实现平滑展开效果：

import React, { useState, useRef } from 'react';

const CollapseWithAnimation = ({ title, children }) => {
  const [isOpen, setIsOpen] = useState(false);
  const contentRef = useRef(null);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        {title} {isOpen ? '▲' : '▼'}
      </button>
      <div
        ref={contentRef}
        style={{
          maxHeight: isOpen ? `${contentRef.current.scrollHeight}px` : '0',
          overflow: 'hidden',
          transition: 'max-height 0.3s ease-in-out'
        }}
      >
        {children}
      </div>
    </div>
  );
};

使用第三方库

对于更复杂的折叠需求，可以考虑使用现成的React组件库：

react实现折叠组件

react-collapse
安装：npm install react-collapse
示例：

import { Collapse } from 'react-collapse';

const MyCollapse = ({ isOpen, children }) => (
  <Collapse isOpened={isOpen}>
    {children}
  </Collapse>
);

Material-UI的Accordion
安装：npm install @mui/material
示例：

react实现折叠组件

import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';

const MuiCollapse = () => (
  <Accordion>
    <AccordionSummary>Title</AccordionSummary>
    <AccordionDetails>Content</AccordionDetails>
  </Accordion>
);

性能优化建议

对于包含大量内容的折叠组件，建议使用React.memo避免不必要的渲染：

const MemoizedCollapse = React.memo(({ isOpen, children }) => (
  <div style={{ display: isOpen ? 'block' : 'none' }}>
    {children}
  </div>
));

可访问性考虑

添加ARIA属性提升无障碍体验：

<button 
  aria-expanded={isOpen}
  aria-controls="collapse-content"
  onClick={() => setIsOpen(!isOpen)}
>
  {title}
</button>
<div id="collapse-content" aria-hidden={!isOpen}>
  {children}
</div>