react如何页面布局

React 页面布局方法

使用 CSS Flexbox 布局

Flexbox 是 React 中最常用的布局方式之一，通过 display: flex 属性实现灵活布局。

import './App.css';

function App() {
  return (
    <div className="container">
      <div className="header">Header</div>
      <div className="main">
        <div className="sidebar">Sidebar</div>
        <div className="content">Content</div>
      </div>
      <div className="footer">Footer</div>
    </div>
  );
}

export default App;

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  display: flex;
  flex: 1;
}

.sidebar {
  width: 200px;
  background: #f0f0f0;
}

.content {
  flex: 1;
  padding: 20px;
}

使用 CSS Grid 布局

CSS Grid 适合更复杂的二维布局需求。

function App() {
  return (
    <div className="grid-container">
      <div className="header">Header</div>
      <div className="sidebar">Sidebar</div>
      <div className="content">Content</div>
      <div className="footer">Footer</div>
    </div>
  );
}

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

使用 UI 组件库

流行的 React UI 库如 Material-UI、Ant Design 提供了现成的布局组件。

import { Layout } from 'antd';

const { Header, Sider, Content, Footer } = Layout;

function App() {
  return (
    <Layout>
      <Header>Header</Header>
      <Layout>
        <Sider width={200}>Sidebar</Sider>
        <Content>Content</Content>
      </Layout>
      <Footer>Footer</Footer>
    </Layout>
  );
}

响应式布局实现

使用媒体查询实现响应式布局。

@media (max-width: 768px) {
  .main {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
  }
}

动态布局切换

通过状态管理实现动态布局变化。

import { useState } from 'react';

function App() {
  const [isVertical, setIsVertical] = useState(false);

  return (
    <div className={`layout ${isVertical ? 'vertical' : 'horizontal'}`}>
      <button onClick={() => setIsVertical(!isVertical)}>
        Toggle Layout
      </button>
      {/* 布局内容 */}
    </div>
  );
}

.layout.horizontal {
  display: flex;
  flex-direction: row;
}

.layout.vertical {
  display: flex;
  flex-direction: column;
}

以上方法可以根据项目需求单独或组合使用，实现各种复杂的页面布局需求。