在React中使用Antd的Layout组件

在React中使用Ant Design（简称Antd）的Layout组件来引入布局是非常容易的。Antd的Layout组件包括Header、Sider、Content和Footer，它们可以组合使用，以创建复杂的布局结构。

一、首先确保你的项目已经安装了Ant Design，如若未安装你可通过以下命令来安装

npm install antd

二、使用Layout组件

在组件中使用Layout组件及其子组件来创建布局，你可通过这个地址进入Antd Layout组件布局 Layout - Ant Design，在此网页中你可以选择你想要的Layout布局样式。组件概述如下：

Layout：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。
Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

你可以根据你的自身需求选择你需要的布局样式，复制代码到App.js文件中

举例如下：选择上中下布局，复制布局代码

import React from 'react';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
const { Header, Content, Footer } = Layout;
const items = new Array(15).fill(null).map((_, index) => ({
  key: index + 1,
  label: `nav ${index + 1}`,
}));
const App = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <Layout>
      <Header
        style={{
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <div className="demo-logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['2']}
          items={items}
          style={{
            flex: 1,
            minWidth: 0,
          }}
        />
      </Header>
      <Content
        style={{
          padding: '0 48px',
        }}
      >
        <Breadcrumb
          style={{
            margin: '16px 0',
          }}
        >
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb>
        <div
          style={{
            background: colorBgContainer,
            minHeight: 280,
            padding: 24,
            borderRadius: borderRadiusLG,
          }}
        >
          Content
        </div>
      </Content>
      <Footer
        style={{
          textAlign: 'center',
        }}
      >
        Ant Design ©{new Date().getFullYear()} Created by Ant UED
      </Footer>
    </Layout>
  );
};
export default App;

在网页输入localhost：3000

页面展示如下：

这样就完成了一个简单的Layout布局。

三、 响应式布局
Antd的Layout组件是响应式的，这意味着它会根据屏幕的大小自动调整布局。你可以通过设置<Sider>组件的collapsedWidth属性来控制侧边栏折叠后的宽度。

四、 自定义主题
Antd允许你自定义主题，包括颜色、字体大小等，以适应你的设计需求。

通过以上步骤，你可以在React应用中使用Ant Design的Layout组件来创建布局。Antd的组件库非常丰富，你可以结合其他组件一起使用，以构建出更加复杂和专业的用户界面。