当前位置：首页 > React

react如何折叠

2026-02-26 01:20:35React

在 React 中实现折叠功能

使用状态管理控制折叠

通过 useState 管理折叠状态，切换布尔值控制内容显示或隐藏。示例代码：

import { useState } from 'react';

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

  return (
    <div>
      <button onClick={() => setIsCollapsed(!isCollapsed)}>
        {isCollapsed ? '展开' : '折叠'}
      </button>
      {!isCollapsed && <div>可折叠内容</div>}
    </div>
  );
}

添加动画效果

结合 CSS 过渡或第三方库（如 react-transition-group）实现平滑动画。示例：

import { CSSTransition } from 'react-transition-group';

function AnimatedCollapse() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>切换</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="collapse"
        unmountOnExit
      >
        <div className="content">动画内容</div>
      </CSSTransition>
    </div>
  );
}

使用第三方组件库

直接使用现成组件如 Material-UI 的 Collapse：

import { Collapse, Button } from '@mui/material';

function MUICollapse() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <Button onClick={() => setOpen(!open)}>切换</Button>
      <Collapse in={open}>
        <div>Material-UI 折叠内容</div>
      </Collapse>
    </div>
  );
}

递归实现多级折叠

适用于树形结构数据的嵌套折叠：

function TreeItem({ data }) {
  const [expanded, setExpanded] = useState(false);

  return (
    <div>
      <div onClick={() => setExpanded(!expanded)}>
        {data.title} {data.children && '>'}
      </div>
      {expanded && data.children?.map(child => (
        <TreeItem key={child.id} data={child} />
      ))}
    </div>
  );
}