如何用React结合CSS Flexbox实现可折叠左侧侧边栏

核心实现思路 #

通过React的useState维护侧边栏的展开/折叠状态，结合CSS类名（或内联样式）控制侧边栏宽度，利用Flex布局让右侧主内容区自动适配剩余空间，点击按钮触发状态切换即可实现需求。

完整组件代码（JSX + 逻辑） #

import { useState } from 'react';
import './SidebarLayout.scss';

const SidebarLayout = () => {
  // 初始设为false表示默认隐藏侧边栏，可根据需求调整为true
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  // 切换侧边栏状态
  const toggleSidebar = () => {
    setIsSidebarOpen(prevState => !prevState);
  };

  return (
    <div className="layout-container">
      {/* 左侧侧边栏：根据状态切换类名 */}
      <aside className={`sidebar ${isSidebarOpen ? 'sidebar--open' : 'sidebar--closed'}`}>
        <div className="sidebar-content">
          <h3>侧边栏菜单</h3>
          <ul>
            <li>菜单项1</li>
            <li>菜单项2</li>
            <li>菜单项3</li>
          </ul>
        </div>
      </aside>

      {/* 右侧主内容区 */}
      <main className="main-content">
        {/* 切换按钮，文本随状态变化 */}
        <button onClick={toggleSidebar} className="toggle-btn">
          {isSidebarOpen ? '收起侧边栏' : '展开侧边栏'}
        </button>
        <h1>主内容区域</h1>
        <p>侧边栏展开/收起时，这里会自动调整宽度填充剩余空间</p>
      </main>
    </div>
  );
};

export default SidebarLayout;

SCSS样式代码 #

.layout-container {
  display: flex;
  height: 100vh; /* 占满整个视口高度，可按需调整 */
  overflow: hidden;
}

.sidebar {
  transition: width 0.3s ease; /* 添加平滑过渡动画 */
  background-color: #2c3e50;
  color: #fff;
  overflow: hidden; /* 防止内容溢出 */

  &--open {
    width: 240px; /* 展开时的宽度 */
  }

  &--closed {
    width: 0; /* 收起时完全隐藏，若要保留图标栏可设为60px */
  }

  .sidebar-content {
    padding: 20px;
  }
}

.main-content {
  flex: 1; /* 自动填充父容器剩余空间 */
  padding: 20px;
  background-color: #ecf0f1;
  overflow-y: auto; /* 内容超出时允许滚动 */
}

.toggle-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #3498db;
  color: #fff;
  cursor: pointer;
  margin-bottom: 20px;
}

关键细节说明 #

1. 状态控制：isSidebarOpen状态变量直接决定侧边栏的显示状态，toggleSidebar函数通过翻转状态值实现切换。
2. Flex布局适配：父容器设为display: flex，主内容区用flex: 1，确保侧边栏宽度变化时，主内容区自动拉伸/收缩。
3. 平滑过渡：给侧边栏添加transition: width 0.3s ease，避免宽度突变的生硬感。
4. 两种样式控制方式：除了类名切换，也可以直接用内联样式绑定宽度：

   <aside className="sidebar" style={{ width: isSidebarOpen ? '240px' : '0' }}>
   

   这种方式更适合简单样式场景，类名法则更便于维护复杂样式。

内容的提问来源于stack exchange，提问作者user2133561