当前位置：首页 > React

react 实现折叠

2026-01-26 15:49:24React

React 实现折叠功能

使用 React 实现折叠功能可以通过状态管理和 CSS 过渡效果结合实现。以下是几种常见方法：

方法一：使用 useState 和 CSS 过渡

通过 React 的 useState 钩子管理折叠状态，结合 CSS 的 height 和 transition 属性实现动画效果。

import React, { useState } from 'react';

function Collapsible() {
  const [isCollapsed, setIsCollapsed] = useState(true);

  return (
    <div>
      <button onClick={() => setIsCollapsed(!isCollapsed)}>
        {isCollapsed ? '展开' : '折叠'}
      </button>
      <div
        style={{
          maxHeight: isCollapsed ? '0px' : '1000px',
          overflow: 'hidden',
          transition: 'max-height 0.3s ease-in-out'
        }}
      >
        <div>这里是可折叠的内容</div>
      </div>
    </div>
  );
}

方法二：使用 react-transition-group

react-transition-group 提供了更强大的过渡动画控制能力。

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

function CollapsibleWithTransition() {
  const [isCollapsed, setIsCollapsed] = useState(true);

  return (
    <div>
      <button onClick={() => setIsCollapsed(!isCollapsed)}>
        {isCollapsed ? '展开' : '折叠'}
      </button>
      <CSSTransition
        in={!isCollapsed}
        timeout={300}
        classNames="collapse"
        unmountOnExit
      >
        <div className="content">
          这里是带有过渡动画的可折叠内容
        </div>
      </CSSTransition>
    </div>
  );
}

对应的 CSS 样式：

.collapse-enter {
  max-height: 0;
}
.collapse-enter-active {
  max-height: 1000px;
  transition: max-height 300ms ease-in;
}
.collapse-exit {
  max-height: 1000px;
}
.collapse-exit-active {
  max-height: 0;
  transition: max-height 300ms ease-out;
}

方法三：使用第三方库

对于更复杂的需求，可以考虑使用专门的折叠组件库，如 react-collapse：

import React, { useState } from 'react';
import { Collapse } from 'react-collapse';

function CollapsibleWithLibrary() {
  const [isCollapsed, setIsCollapsed] = useState(true);

  return (
    <div>
      <button onClick={() => setIsCollapsed(!isCollapsed)}>
        {isCollapsed ? '展开' : '折叠'}
      </button>
      <Collapse isOpened={!isCollapsed}>
        <div>这里使用了 react-collapse 库实现折叠效果</div>
      </Collapse>
    </div>
  );
}

性能优化建议

对于包含大量内容的折叠组件，考虑使用 will-change CSS 属性优化性能：