react如何折叠

在 React 中实现折叠功能

使用 useState 管理折叠状态 通过 useState 定义一个状态变量来控制折叠面板的显示与隐藏。例如：

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

点击按钮时通过 setIsCollapsed 切换状态。

条件渲染内容

根据状态变量决定是否渲染内容区域：

{!isCollapsed && <div>可折叠的内容</div>}

或通过 CSS 控制显示/隐藏：

<div style={{ display: isCollapsed ? 'none' : 'block' }}>
  可折叠的内容
</div>

添加切换按钮

创建一个按钮来触发状态变更：

<button onClick={() => setIsCollapsed(!isCollapsed)}>
  {isCollapsed ? '展开' : '折叠'}
</button>

使用 CSS 过渡动画

通过 CSS 实现平滑的展开/折叠动画效果：

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

.collapsible-content.expanded {
  max-height: 1000px; /* 足够大的值 */
}

使用第三方库

可以考虑使用现成的 React 折叠组件库：

• react-collapsed
• react-accessible-accordion
• material-ui 的 Collapse 组件

这些库提供了更多开箱即用的功能，如动画、无障碍支持等。