react自适应布局

在 React 中实现自适应布局可以通过使用 CSS 的弹性布局（Flexbox）或者栅格系统来实现。下面是使用 Flexbox 实现简单的自适应布局的示例：

```jsx
import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="container">
      <div className="sidebar">Sidebar</div>
      <div className="main-content">Main Content</div>
    </div>
  );
}

export default App;
```

```css
/* App.css */

.container {
  display: flex;
}

.sidebar {
  flex: 1; /* 占据剩余空间的1部分 */
  background-color: #eee;
}

.main-content {
  flex: 2; /* 占据剩余空间的2部分 */
  background-color: #fff;
}
```

在这个例子中，`.container` 使用了 Flexbox 布局，`.sidebar` 和 `.main-content` 分别占据了 `.container` 中的 1/3 和 2/3 的宽度。

如果你想要更高级的自适应布局，可以考虑使用 CSS Grid 或者一些流行的 UI 库，比如 Bootstrap、Ant Design、Material-UI 等，它们都提供了强大的布局系统和组件，可以简化你的布局工作。

下面是一个使用 Ant Design 的例子：

```jsx
import React from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import './App.css';

const { Header, Content, Footer } = Layout;

const App = () => {
  return (
    <Layout className="layout">
      <Header>
        <div className="logo" />
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
          <Menu.Item key="1">Nav 1</Menu.Item>
          <Menu.Item key="2">Nav 2</Menu.Item>
          <Menu.Item key="3">Nav 3</Menu.Item>
        </Menu>
      </Header>
      <Content style={{ padding: '0 50px' }}>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb>
        <div className="site-layout-content">Main Content</div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>Footer</Footer>
    </Layout>
  );
}

export default App;
```

在这个例子中，使用了 Ant Design 的 `Layout` 组件，其中 `Header`、`Content`、`Footer` 分别代表页面的头部、主要内容区域和底部。这个布局是响应式的，并且能够自适应不同的屏幕大小。