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` 分别代表页面的头部、主要内容区域和底部。这个布局是响应式的，并且能够自适应不同的屏幕大小。