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>
);
}