当前位置：首页 > React

react如何折叠

2026-02-11 15:07:15React

在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 ? '0' : '1000px',
        overflow: 'hidden',
        transition: 'max-height 0.3s ease'
      }}>
        <p>可折叠的内容区域</p>
      </div>
    </div>
  );
}

使用CSS Transition实现动画

结合CSS的transition属性实现平滑动画效果：

react如何折叠

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

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

使用第三方库

考虑使用现成的React组件库如react-collapse：

import { Collapse } from 'react-collapse';

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        切换折叠
      </button>
      <Collapse isOpened={isOpen}>
        <div>可折叠的内容</div>
      </Collapse>
    </div>
  );
}

实现手风琴效果

多个折叠面板中同时只展开一个：

function Accordion() {
  const [activeIndex, setActiveIndex] = useState(null);

  const items = ['项目1', '项目2', '项目3'];

  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>
          <button onClick={() => 
            setActiveIndex(activeIndex === index ? null : index)
          }>
            {item}
          </button>
          <div style={{
            maxHeight: activeIndex === index ? '1000px' : '0',
            overflow: 'hidden',
            transition: 'max-height 0.3s ease'
          }}>
            内容 {index + 1}
          </div>
        </div>
      ))}
    </div>
  );
}