当前位置：首页 > React

react如何折叠

2026-03-30 18:04:59React

在React中实现折叠功能

React中实现折叠效果可以通过多种方式完成，常见的有使用CSS动画、第三方库或手动管理状态。以下是几种实现方法：

使用状态管理折叠

通过React的useState钩子管理折叠状态，结合CSS实现动画效果：

react如何折叠

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' : '500px',
          overflow: 'hidden',
          transition: 'max-height 0.3s ease'
        }}
      >
        <p>这是可折叠的内容</p>
      </div>
    </div>
  );
}

使用CSS过渡效果

通过CSS类名切换实现平滑的折叠动画：

react如何折叠

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

.collapsible-content.expanded {
  max-height: 500px;
}

使用第三方库

React Transition Group等库提供了更完善的动画解决方案：

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

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

  return (
    <div>
      <button onClick={() => setIsCollapsed(!isCollapsed)}>
        切换折叠
      </button>
      <CSSTransition
        in={!isCollapsed}
        timeout={300}
        classNames="collapse"
        unmountOnExit
      >
        <div className="content">
          <p>可折叠内容</p>
        </div>
      </CSSTransition>
    </div>
  );
}

实现细节注意事项

性能优化：对于大型内容，考虑使用will-change: transform提升动画性能
无障碍访问：添加aria-expanded属性和适当的键盘事件支持
动态高度：如果需要适应动态内容高度，可以使用scrollHeight代替固定高度

const contentRef = useRef(null);
const [contentHeight, setContentHeight] = useState(0);

useEffect(() => {
  setContentHeight(contentRef.current.scrollHeight);
}, [contentRef]);

移动端优化

针对移动设备触摸事件，可以添加手势支持：

const [startY, setStartY] = useState(null);

const handleTouchStart = (e) => {
  setStartY(e.touches[0].clientY);
};

const handleTouchMove = (e) => {
  if (startY === null) return;
  const currentY = e.touches[0].clientY;
  if (currentY - startY > 50) {
    setIsCollapsed(true);
  } else if (startY - currentY > 50) {
    setIsCollapsed(false);
  }
};

标签: react