零基础学习 antd：入门必看 – wiki基地

作者： /

零基础学习 antd：入门必看

欢迎来到前端开发的世界，准备好用简洁、高效的方式构建漂亮的界面了吗？如果你正在使用 React，并且渴望快速搭建出具有专业感、企业级的设计系统，那么 Ant Design (antd) 绝对是你不可错过的利器。

但等等，如果你是 UI 库的初学者，甚至是刚刚接触 React 不久，听到“企业级”、“设计系统”这样的词汇会不会觉得有些望而却步？别担心！这篇文章正是为你量身打造的“入门必看”指南。我们将从零开始，一步步揭开 antd 的神秘面纱，让你掌握使用这个强大工具的基础技能。

第一章：初识 Ant Design (antd) – 它是什么，为什么选择它？

1.1 Ant Design (antd) 是什么？

简单来说，Ant Design (antd) 是一个为 React 框架量身打造的企业级 UI 组件库。

想象一下，你在搭建一个网站或应用，需要各种各样的界面元素：按钮、输入框、表格、弹窗、导航菜单等等。从零开始手写这些组件的代码（包括它们的样式、交互逻辑、响应式设计）无疑是一项巨大且重复的工作。而且要保证它们在不同浏览器、不同设备上都能保持一致的外观和行为，更是难上加难。

antd 的出现正是为了解决这个问题。它提供了一套现成的、高质量的、遵循统一设计规范的 React 组件集合。这套组件不仅外观漂亮，而且功能强大，覆盖了企业级应用开发中绝大多数常见的 UI 需求。

它不仅仅是一堆组件的堆砌，背后还蕴含着 Ant Design 团队沉淀多年的设计价值观和原则，致力于提升用户体验和开发者效率。

1.2 为什么选择 Ant Design？

既然市面上有那么多 React UI 组件库，为什么我们要选择 antd 呢？它的优势在哪里？

  • 企业级设计体系： antd 基于 Ant Design 设计规范，这套规范在业界享有盛誉，旨在提供优雅、一致、专业的界面体验。使用 antd，你的应用将天然带有一种专业和严谨的气质。
  • 丰富的组件库： antd 提供了极其全面的组件，小到按钮、图标，大到复杂的表单、表格、数据可视化组件，几乎涵盖了企业应用开发的方方面面。这意味着你不需要花费大量时间去寻找或开发常用组件。
  • 高质量的组件： antd 的组件经过严格的测试和优化，考虑了性能、可访问性（Accessibility）、国际化（Internationalization）等多个方面。它们不仅看起来不错，用起来也稳定可靠。
  • 优秀的文档和社区支持： antd 拥有非常详尽、易懂的官方文档，包含了每个组件的使用示例、API 说明和设计指南。同时，它庞大的用户群体意味着你在遇到问题时很容易找到解决方案或寻求帮助。
  • 高度可定制性： 尽管 antd 提供了开箱即用的风格，但它也允许你根据自己的品牌或项目需求进行主题定制，修改主色调、字体、间距等样式变量。
  • 持续迭代和维护： antd 作为一个活跃的开源项目，由一支专业的团队维护，不断吸收社区反馈，修复 bug，推出新功能，确保其与时俱进。

总之，选择 antd 意味着你可以更快地构建出高质量、专业范儿的应用，将精力更多地放在业务逻辑上，而不是重复的 UI 开发工作中。

第二章：零基础前的准备 – 你需要知道什么？

尽管本文是针对“零基础学习 antd”的读者，但需要明确的是，antd 是一个基于 React 的库。因此，在开始学习 antd 本身之前，你最好具备以下基础知识：

  1. HTML, CSS, JavaScript (ES6+): 这是前端开发的基础。你需要理解 DOM 结构、CSS 盒模型、选择器、Flexbox/Grid 布局等基本概念，以及现代 JavaScript (ES6+) 的语法，如箭头函数、解构赋值、Promise 等。
  2. React 基础： 这是学习 antd 的核心前提。你至少需要了解：
    • JSX 语法： 如何在 JavaScript 中写类似 HTML 的代码。
    • 函数式组件和类组件（虽然现在更推荐函数式组件）： 如何创建和使用 React 组件。
    • Props (属性)： 组件之间如何通过 props 传递数据。
    • State (状态)： 组件内部如何管理自己的数据变化 (使用 useState Hook)。
    • 事件处理： 如何响应用户的交互（如点击事件 onClick）。
    • 条件渲染和列表渲染： 如何根据条件显示不同内容或渲染列表数据。
    • Hooks (如 useEffect, useState 等，尤其在现代 React 开发中非常重要)。
  3. Node.js 和 npm/yarn/pnpm： React 项目通常需要构建工具链，而这些工具链依赖于 Node.js 环境和包管理器 (npm, yarn, 或 pnpm)。你需要知道如何在终端运行基本的命令来安装依赖和启动开发服务器。

结论： 本文的“零基础”是指零 antd 基础，但你需要具备一定的 React 开发基础。如果你对 React 还很陌生，建议先花时间学习 React 官方文档或相关的入门教程，再回来学习 antd。

第三章：搭建你的第一个 Ant Design 项目

学习任何技术，最好的方式就是动手实践。现在，让我们来创建一个简单的 React 项目，并引入 antd。

3.1 环境准备

确保你的电脑已经安装了 Node.js。你可以在终端输入 node -v 和 npm -v (或 yarn -v, pnpm -v) 来检查。如果未安装，请前往 Node.js 官网下载安装最新版本。

3.2 创建 React 项目

对于新手，推荐使用官方或社区提供的脚手架工具来快速搭建项目：

  • 使用 Vite (推荐，更轻快):
    bash
    # 使用 npm
    npm create vite@latest my-antd-app --template react
    # 或 使用 yarn
    yarn create vite my-antd-app --template react
    # 或 使用 pnpm
    pnpm create vite my-antd-app --template react
    然后按照提示选择 React 或 React with TypeScript。
  • 使用 Create React App (CRA – 传统但依然可用):
    bash
    # 使用 npm
    npx create-react-app my-antd-app
    # 或 使用 yarn
    yarn create react-app my-antd-app

选择其中一种方式创建一个名为 my-antd-app 的新项目。创建完成后，进入项目目录：

bash
cd my-antd-app

3.3 安装 Ant Design

现在，在项目目录中安装 antd 包：

“`bash

使用 npm

npm install antd –save

或 使用 yarn

yarn add antd

或 使用 pnpm

pnpm add antd
“`

安装过程可能需要一些时间，取决于你的网络速度。

3.4 运行项目

安装完成后，启动开发服务器：

“`bash

使用 npm

npm start # 如果用 CRA
npm run dev # 如果用 Vite

或 使用 yarn

yarn start # 如果用 CRA
yarn dev # 如果用 Vite

或 使用 pnpm

pnpm start # 如果用 CRA
pnpm dev # 如果用 Vite
“`

你的浏览器应该会自动打开一个页面，通常是 http://localhost:3000 (CRA) 或 http://localhost:5173 (Vite)，显示 React 的默认欢迎页面。这说明项目已经成功运行。

第四章：你的第一个 Ant Design 组件 – Button

现在，让我们在项目中使用第一个 antd 组件：Button（按钮）。

打开你的项目文件，找到主应用组件文件，通常是 src/App.js (或 src/App.jsx, src/App.tsx)。将其内容修改如下：

“`jsx
import React from ‘react’;
// 从 antd 中导入 Button 组件
import { Button } from ‘antd’;
// 导入 antd 的默认样式文件
// Vite 项目中，在 main.js 或 main.tsx 中导入可能更规范
// 但为了简单演示，我们先在 App.js 中导入
import ‘antd/dist/reset.css’; // antd v5 使用这个重置样式

function App() {
return (

我的第一个 Ant Design 页面

  {/* 使用 antd 的 Button 组件 */}
  <Button type="primary">点我试试</Button>

  {/* 再来一个默认按钮 */}
  <Button>普通按钮</Button>
</div>

);
}

export default App;
“`

代码解释：

  1. import { Button } from 'antd';: 这行代码从 antd 库中导入了 Button 组件。使用 {} 包裹表示这是按需导入，只导入我们需要的组件。
  2. import 'antd/dist/reset.css';: 这一步非常重要！ 这行代码导入了 antd 的默认样式文件。antd 的组件样式是独立的，你需要手动导入才能看到它们应有的样子。antd/dist/reset.css 是 antd v5 推荐的导入方式，它包含了一些全局的重置样式和组件的基础样式。
  3. <Button type="primary">点我试试</Button>: 这是使用 antd Button 组件的方式。它看起来像一个普通的 HTML 标签，但实际上是一个 React 组件。type="primary" 是给 Button 组件传递一个叫做 type 的 props（属性），primary 是 antd 按钮的一种类型，表示主要操作按钮，通常是蓝色。
  4. <Button>普通按钮</Button>: 这是另一个 Button 组件，没有指定 type 属性，它会使用 antd 默认的按钮样式。

保存文件后，回到浏览器，如果开发服务器还在运行，页面应该会自动刷新。你现在应该能看到两个带有 antd 风格的按钮了！

恭喜你！你已经成功地在你的 React 项目中引入并使用了第一个 antd 组件。

第五章：深入了解 antd 组件的使用方式 – Props

antd 组件的核心就是通过 Props (属性) 来进行配置和定制。每个 antd 组件都有自己一套丰富的 props，你可以通过查阅文档来了解它们的功能。

让我们以 Button 组件为例，看看常见的 props：

“`jsx
import React from ‘react’;
import { Button } from ‘antd’;
import ‘antd/dist/reset.css’; // antd v5 样式

function App() {
return (

Button 组件的 Props 示例

  {/* type: 按钮类型 */}
  <Button type="primary" style={{ marginRight: '10px' }}>Primary Button</Button>
  <Button style={{ marginRight: '10px' }}>Default Button</Button>
  <Button type="dashed" style={{ marginRight: '10px' }}>Dashed Button</Button>
  <Button type="text" style={{ marginRight: '10px' }}>Text Button</Button>
  <Button type="link">Link Button</Button>

  <br /><br />

  {/* size: 按钮大小 */}
  <Button type="primary" size="small" style={{ marginRight: '10px' }}>Small Button</Button>
  <Button type="primary" size="middle" style={{ marginRight: '10px' }}>Middle Button</Button>
  <Button type="primary" size="large">Large Button</Button>

  <br /><br />

  {/* disabled: 禁用状态 */}
  <Button type="primary" disabled style={{ marginRight: '10px' }}>Disabled Primary</Button>
  <Button disabled>Disabled Default</Button>

  <br /><br />

  {/* loading: 加载状态 */}
  <Button type="primary" loading style={{ marginRight: '10px' }}>Loading Button</Button>
  <Button loading>Loading Default</Button>

  <br /><br />

  {/* onClick: 点击事件 */}
  <Button type="primary" onClick={() => alert('按钮被点击了!')}>点击触发事件</Button>

</div>

);
}

export default App;
“`

代码解释：

  • type: 控制按钮的外观类型，常用的有 primary (主按钮), default (默认按钮), dashed (虚线边框按钮), text (文本按钮), link (链接按钮)。
  • size: 控制按钮的大小，可选值有 small, middle, large。
  • disabled: 布尔值，设置为 true 时按钮变为禁用状态，不可点击。
  • loading: 布尔值或包含加载状态配置的对象，设置为 true 时按钮显示加载动画，并通常也会禁用点击。
  • onClick: 函数，当按钮被点击时触发的回调函数。这是处理用户交互的关键 props。

核心思想： 学习 antd 组件就是学习它提供的各种 props。当你需要某个组件的特定功能或外观时，首先应该去查阅 antd 的官方文档，找到该组件的 API 页面，查看它支持哪些 props，以及这些 props 的作用和可选值。

第六章：常用的基础组件概览

antd 提供了非常多的组件，作为入门，我们不需要一次性掌握所有。以下是一些在构建应用时最常用到的基础组件：

6.1 Icon（图标）

图标是 UI 中非常常见的元素。antd 集成了 Ant Design 风格的图标库。

“`jsx
import React from ‘react’;
import { Button } from ‘antd’; // Button 组件经常和 Icon 一起使用
import { HeartOutlined, StarFilled, LoadingOutlined } from ‘@ant-design/icons’; // 从 icons 子库中导入图标
import ‘antd/dist/reset.css’;

function App() {
return (

Icon 图标示例

  {/* 使用导入的图标作为组件 */}
  <HeartOutlined style={{ fontSize: '24px', color: 'hotpink' }} />
  <StarFilled style={{ fontSize: '24px', color: 'gold', marginLeft: '10px' }} />
  <LoadingOutlined style={{ fontSize: '24px', color: 'blue', marginLeft: '10px' }} />

  <br /><br />

  {/* Button 中使用 Icon */}
  <Button type="primary" icon={<HeartOutlined />}>
    收藏
  </Button>
   <Button type="default" icon={<StarFilled />} style={{ marginLeft: '10px' }}>
    星标
  </Button>
</div>

);
}

export default App;
“`

注意： antd 的图标是独立在一个 @ant-design/icons 包里的，你需要单独安装：npm install @ant-design/icons --save 或 yarn add @ant-design/icons 或 pnpm add @ant-design/icons。然后按需从这个包中导入具体的图标组件。

6.2 Input（输入框）

用户输入信息最常用的组件。

“`jsx
import React, { useState } from ‘react’;
import { Input } from ‘antd’;
import ‘antd/dist/reset.css’;

function App() {
const [inputValue, setInputValue] = useState(”);

return (

Input 输入框示例

  {/* 基本输入框 */}
  <Input placeholder="请输入文本" style={{ width: 200, marginBottom: '10px' }} />

  {/* 带值的输入框，受控组件 */}
  <Input
    placeholder="请输入文本"
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
    style={{ width: 200, marginBottom: '10px' }}
  />
  <p>当前输入框的值: {inputValue}</p>

  {/* 密码输入框 */}
  <Input.Password placeholder="请输入密码" style={{ width: 200, marginBottom: '10px' }} />

  {/* 文本域 */}
  <Input.TextArea rows={4} placeholder="请输入多行文本" style={{ width: 300 }} />

</div>

);
}

export default App;
“`

注意： antd 的 Input 组件是受控组件的典型应用。你需要使用 React 的 useState 来管理输入框的值，并通过 onChange 事件来更新状态。

6.3 Form（表单）

构建复杂数据输入的关键。antd 的 Form 组件提供了强大的表单布局、数据收集、校验等能力。这是初学者需要花些时间理解的核心组件之一。

“`jsx
import React from ‘react’;
import { Form, Input, Button, Checkbox } from ‘antd’;
import ‘antd/dist/reset.css’;

function App() {
// 表单提交处理函数
const onFinish = (values) => {
console.log(‘提交的表单数据:’, values);
alert(提交成功！用户名: ${values.username}, 密码: ${values.password});
};

// 表单提交失败处理函数
const onFinishFailed = (errorInfo) => {
console.log(‘提交失败:’, errorInfo);
};

return (

Form 表单示例

  {/* 使用 Form 组件包裹表单项 */}
  <Form
    name="basic" // 表单名称，可选
    labelCol={{ span: 8 }} // label 占的宽度
    wrapperCol={{ span: 16 }} // 输入控件占的宽度
    initialValues={{ remember: true }} // 表单项的初始值
    onFinish={onFinish} // 提交成功时触发
    onFinishFailed={onFinishFailed} // 提交失败时触发
    autoComplete="off" // 关闭浏览器自动填充
    style={{ maxWidth: 600 }} // 给表单设置最大宽度
  >
    {/* Form.Item 包裹每个表单控件 */}
    <Form.Item
      label="用户名" // 标签文本
      name="username" // 字段名，提交时会收集这个字段的值
      rules={[{ required: true, message: '请输入你的用户名!' }]} // 校验规则：必填
    >
      <Input /> {/* 对应的表单控件 */}
    </Form.Item>

    <Form.Item
      label="密码"
      name="password"
      rules={[{ required: true, message: '请输入你的密码!' }]} // 校验规则：必填
    >
      <Input.Password />
    </Form.Item>

    <Form.Item
      name="remember"
      valuePropName="checked" // 对于 Checkbox，name 对应的值是 checked 属性
      wrapperCol={{ offset: 8, span: 16 }} // Checkbox 标签通常没有 label，需要调整布局
    >
      <Checkbox>记住我</Checkbox>
    </Form.Item>

    {/* 提交按钮 */}
    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
      <Button type="primary" htmlType="submit">
        提交
      </Button>
    </Form.Item>
  </Form>
</div>

);
}

export default App;
“`

核心概念：

  • <Form>: 表单的容器。通过 onFinish 和 onFinishFailed 监听提交结果，通过 initialValues 设置默认值，通过 labelCol 和 wrapperCol 控制布局。
  • <Form.Item>: 包裹每一个表单控件（如 Input, Checkbox）。
    • label: 表单项的标签文本。
    • name: 非常重要！ 这是表单提交时用来识别该字段的键名。
    • rules: 校验规则数组，定义了该字段的校验逻辑（如是否必填、格式要求等）。
    • <Input>, <Input.Password>, <Checkbox> 等：放在 Form.Item 内部，是实际的表单输入控件。
  • onFinish: 当表单验证成功后，点击 htmlType="submit" 的按钮会触发此函数，参数 values 是一个对象，包含了所有表单项的值（以 name 为键）。
  • valuePropName: 对于某些特殊的表单控件（如 Checkbox 的值是 checked 而不是 value），需要通过 valuePropName 来指定哪个属性代表其值。

理解 Form 组件的数据流和校验机制是使用 antd 构建复杂应用的关键一步。

6.4 Table（表格）

用于展示结构化数据，是企业应用中最常见的组件之一。

“`jsx
import React from ‘react’;
import { Table } from ‘antd’;
import ‘antd/dist/reset.css’;

// 示例数据
const dataSource = [
{
key: ‘1’, // 每条数据必须有一个唯一的 key
name: ‘胡彦斌’,
age: 32,
address: ‘西湖区湖底公园1号’,
},
{
key: ‘2’,
name: ‘胡彦祖’,
age: 42,
address: ‘西湖区湖底公园2号’,
},
{
key: ‘3’,
name: ‘王大锤’,
age: 25,
address: ‘东城区阳光小区5号’,
},
];

// 示例列配置
const columns = [
{
title: ‘姓名’, // 列头显示文本
dataIndex: ‘name’, // 数据源中对应的数据字段名
key: ‘name’, // React 渲染列表需要 key
},
{
title: ‘年龄’,
dataIndex: ‘age’,
key: ‘age’,
},
{
title: ‘住址’,
dataIndex: ‘address’,
key: ‘address’,
},
];

function App() {
return (

Table 表格示例

  {/* 使用 Table 组件 */}
  <Table dataSource={dataSource} columns={columns} />
</div>

);
}

export default App;
“`

核心概念：

  • <Table>: 表格容器。
  • dataSource: 重要！ 一个数组，包含要展示的数据对象。每个数据对象应该有一个唯一的 key 属性（antd 推荐，但也可以通过 rowKey props 指定其他字段作为 key）。
  • columns: 重要！ 一个数组，配置表格的列。数组的每个元素都是一个对象，代表一列。
    • title: 列头显示的文本。
    • dataIndex: 重要！ 对应 dataSource 中数据对象的哪个字段的值应该显示在这一列。
    • key: React 渲染列表时需要的 key，通常可以和 dataIndex 相同（除非有特殊情况）。

Table 组件还有很多其他高级功能，如分页 (pagination), 排序 (sorter), 过滤 (filter), 行选择 (rowSelection) 等，这些可以在熟悉基础后进一步学习。

6.5 Modal（弹窗/对话框）

用于弹出模态对话框，打断用户操作流程以显示重要信息或收集用户输入。

“`jsx
import React, { useState } from ‘react’;
import { Button, Modal } from ‘antd’;
import ‘antd/dist/reset.css’;

function App() {
const [isModalVisible, setIsModalVisible] = useState(false);

const showModal = () => {
setIsModalVisible(true);
};

const handleOk = () => {
alert(‘点击了确定按钮’);
setIsModalVisible(false);
};

const handleCancel = () => {
console.log(‘点击了取消按钮’);
setIsModalVisible(false);
};

return (

Modal 弹窗示例

  {/* 触发弹窗显示的按钮 */}
  <Button type="primary" onClick={showModal}>
    打开对话框
  </Button>

  {/* Modal 组件 */}
  <Modal
    title="这是一个标题" // 弹窗标题
    visible={isModalVisible} // 控制弹窗是否显示，布尔值
    onOk={handleOk} // 点击确定按钮时触发
    onCancel={handleCancel} // 点击取消按钮或遮罩层时触发
    okText="确认" // 确定按钮文本
    cancelText="取消" // 取消按钮文本
  >
    {/* 弹窗内容 */}
    <p>弹窗里的一些内容...</p>
    <p>你可以在这里放入任何 React 元素。</p>
  </Modal>
</div>

);
}

export default App;
“`

核心概念：

  • <Modal>: 弹窗组件。
  • visible: 重要！ 一个布尔值，控制弹窗的显示和隐藏。你需要用 React 的状态来管理它。
  • title: 弹窗的标题。
  • onOk: 点击弹窗底部的“确定”按钮时触发的回调函数。
  • onCancel: 点击弹窗底部的“取消”按钮或点击弹窗外部的遮罩层时触发的回调函数。通常在这个函数里将 visible 状态设置为 false 来关闭弹窗。
  • okText, cancelText: 自定义底部按钮的文本。
  • 子元素：<Modal> 标签内部的内容就是弹窗的主体内容。

6.6 Message 和 Notification（全局提示和通知提醒框）

用于向用户显示临时的、非侵入性的反馈信息。

“`jsx
import React from ‘react’;
import { Button, message, notification } from ‘antd’;
import ‘antd/dist/reset.css’;

function App() {

// 显示一个简单的消息提示
const showMessage = () => {
message.success(‘操作成功!’);
};

// 显示不同类型的消息提示
const showDifferentMessages = () => {
message.info(‘这是一条普通信息’);
message.warning(‘这是一条警告信息’);
message.error(‘这是一条错误信息’);
};

// 显示一个通知提醒框
const openNotification = () => {
notification.open({
message: ‘通知标题’,
description:
‘这里是通知的具体内容，可以放一些重要的信息。’,
onClick: () => {
console.log(‘通知被点击了!’);
},
});
};

// 显示一个带图标的通知提醒框
const openNotificationWithIcon = type => {
notificationtype;
};

return (

Message 和 Notification 示例

  <Button type="primary" onClick={showMessage} style={{ marginRight: '10px' }}>
    显示成功消息
  </Button>
  <Button onClick={showDifferentMessages} style={{ marginRight: '10px' }}>
    显示不同类型消息
  </Button>
   <Button onClick={openNotification} style={{ marginRight: '10px' }}>
    打开普通通知
  </Button>
   <Button type="primary" onClick={() => openNotificationWithIcon('success')}>
    打开带图标通知
  </Button>

</div>

);
}

export default App;
“`

核心概念：

  • message: 提供一系列静态方法（如 message.success(), message.info(), message.warning(), message.error(), message.loading()）来显示简短的全局消息提示，会在几秒后自动消失。
  • notification: 提供静态方法 notification.open() 或 notification[type]() 来显示通知提醒框，通常出现在屏幕角落，除非用户手动关闭或设置了自动关闭延迟。通知提醒框通常用于更重要或需要用户注意的信息。

第七章：简单的布局组件 – Layout

在构建实际应用时，合理的页面布局非常重要。antd 提供了一套灵活的布局组件：Layout, Header, Content, Footer, Sider。

“`jsx
import React from ‘react’;
import { Layout, Menu, theme } from ‘antd’; // 导入 Layout 组件和 Menu, theme
import ‘antd/dist/reset.css’;

const { Header, Content, Footer, Sider } = Layout; // 解构 Layout 子组件

// 示例 Menu.Item
const items = [
{ key: ‘1’, label: ‘nav 1’ },
{ key: ‘2’, label: ‘nav 2’ },
{ key: ‘3’, label: ‘nav 3’ },
];

function App() {
const {
token: { colorBgContainer, borderRadiusLG }, // 从主题中获取背景颜色和圆角
} = theme.useToken();

return (

{/ 设置最小高度让 Footer 沉到底部 /}

Layout 布局示例

页面其他内容…

  {/* 使用 Layout 包裹整个页面结构 */}
  <Layout style={{ minHeight: '500px', border: '1px solid #d9d9d9' }}> {/* 设置最小高度以便看到布局效果 */}
    {/* 头部 */}
    <Header style={{ display: 'flex', alignItems: 'center' }}>
      <div className="demo-logo" style={{ color: 'white', fontSize: '20px', marginRight: '20px' }}>Logo</div>
      {/* 导航菜单 */}
      <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>首页</Breadcrumb.Item>
        <Breadcrumb.Item>列表页</Breadcrumb.Item>
        <Breadcrumb.Item>详情页</Breadcrumb.Item>
      </Breadcrumb> */}

      {/* 主体内容区域 */}
      <div
        style={{
          background: colorBgContainer, // 使用主题色作为背景
          padding: 24,
          minHeight: 280,
          borderRadius: borderRadiusLG, // 使用主题圆角
          marginTop: '16px', // 与上方的面包屑/Header留出间距
        }}
      >
        这里是页面的主要内容区域。
      </div>
    </Content>

    {/* 底部 */}
    <Footer style={{ textAlign: 'center' }}>
      Ant Design ©{new Date().getFullYear()} Created by Ant UED
    </Footer>
  </Layout>

  <br /><br />

   {/* 侧边布局示例 */}
  <Layout style={{ minHeight: '500px', border: '1px solid #d9d9d9' }}>
     {/* 侧边栏 */}
    <Sider>
      <div className="demo-logo-vertical" style={{ height: '32px', margin: '16px', background: 'rgba(255, 255, 255, .2)', borderRadius: '6px' }}></div>
       {/* 侧边菜单 */}
      <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
    </Sider>
     {/* 右侧内容 */}
    <Layout>
       {/* 头部 - 侧边布局中通常也有头部 */}
      <Header style={{ padding: 0, background: colorBgContainer }} />
       {/* 内容 */}
      <Content style={{ margin: '0 16px' }}>
         {/* 面包屑导航（可选） */}
        {/* <Breadcrumb style={{ margin: '16px 0' }}>...</Breadcrumb> */}
        <div
          style={{
            padding: 24,
            minHeight: 360,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
            marginTop: '16px',
          }}
        >
          这是侧边布局的主体内容区域。
        </div>
      </Content>
       {/* 底部 */}
      <Footer style={{ textAlign: 'center' }}>
        Ant Design ©{new Date().getFullYear()} Created by Ant UED
      </Footer>
    </Layout>
  </Layout>

</div>

);
}

export default App;
“`

核心概念：

  • <Layout>: 布局容器，内部可以嵌套其他布局组件。
  • <Header>: 页眉区域。
  • <Content>: 主体内容区域。
  • <Footer>: 页脚区域。
  • <Sider>: 侧边栏，通常用于导航。可以设置 width 控制宽度，collapsible 属性使其可折叠。
  • theme.useToken(): antd v5 引入的 Hooks，用于方便地获取当前主题的设计 Token（如颜色、间距、圆角等），推荐使用这种方式来获取一些常用的样式值，以便于主题定制。

通过组合这些组件，你可以轻松构建出常见的网页布局，如顶部-底部布局、侧边栏布局等。

第八章：学习路径与进阶

恭喜你，已经掌握了 antd 的基本使用方法和一些核心组件。这只是一个开始，antd 的功能远不止于此。接下来的学习你可以关注：

  1. 深入官方文档： antd 的文档是最好的学习资源。仔细阅读常用组件的 API 文档，了解它们的所有 props 和方法。特别是 Form 和 Table，它们的文档非常详细，需要花时间钻研。
  2. 探索更多组件： antd 提供了诸如 Select, DatePicker, Tree, Pagination, Spin, Card, Tabs 等大量组件，根据你的项目需求去学习和使用它们。
  3. 表单校验： antd 的 Form 提供了强大的声明式校验能力，学习如何编写自定义校验规则。
  4. 主题定制： 了解如何修改 antd 的默认主题样式，使其符合你的设计需求。这通常涉及到修改 LESS 变量（对于 antd v4）或使用 ConfigProvider/主题对象（对于 antd v5）。
  5. 国际化： 如果你的应用需要支持多语言，了解 antd 的国际化解决方案。
  6. 按需加载： 随着项目增大，全量导入 antd 样式可能会导致包体积过大。学习如何配置按需加载样式，只加载你使用的组件的样式。
  7. 实际项目应用： 将 antd 应用到实际的项目中，在实践中遇到的问题会促使你去查阅文档和寻找解决方案，这是提升最快的方式。
  8. 关注社区和更新： 加入 antd 相关的社区（如 GitHub Discussion, 论坛），关注官方发布，了解最新特性和变化。

第九章：常见问题与小贴士

  • 样式问题 (特别是 v5): 如果你导入了 antd/dist/reset.css 后，发现自定义样式或一些全局样式被覆盖了，这是正常的，因为 reset.css 引入了重置样式。antd v5 推荐使用 CSS-in-JS 方案，组件样式是隔离的。如果你在使用较老的 antd 版本 (v4)，可能需要导入 antd/dist/antd.css 或 antd.less，并且需要额外配置 LESS。请查阅官方文档关于样式导入和主题定制的最新说明，特别是 v5 的迁移指南。
  • React 版本兼容性: 确保你使用的 React 版本与 antd 版本兼容。通常 antd 的文档会说明其支持的 React 版本范围。
  • 按需加载配置: 如果你使用了 create-react-app 或 Vite 默认配置，可能需要额外配置 babel-plugin-import (对于 antd v4) 或其他工具来实现组件和样式的按需加载，以减少打包体积。antd v5 在大部分现代构建工具下通常已经支持摇树优化 (tree shaking)，但样式按需加载仍需注意。
  • 使用 Hooks: 优先使用函数式组件和 React Hooks 来管理状态和副作用，这与 antd 的 Hooks (如 Form.useForm(), theme.useToken()) 更搭。
  • 不要直接修改 DOM: 记住 React 的原则，尽量通过改变组件的状态 (state) 或属性 (props) 来驱动 UI 更新，而不是直接操作 DOM 元素。antd 组件也是如此。

第十章：总结与展望

从零开始学习 antd 看起来可能组件众多、概念复杂，但只要掌握了它的核心思想——基于 React 组件、通过 props 配置功能和外观、遵循统一设计规范——你就能逐步驾驭它。

antd 极大地提高了前端开发效率，让你能够专注于业务逻辑的实现，而不是重复造轮子。它提供的专业、一致的 UI 体验也能显著提升你的应用的用户满意度。

这是一个充满实践和探索的学习过程。请务必多动手、多看官方文档、多尝试不同的组件和属性。遇到问题不要怕，搜索、查阅文档、向社区提问都是解决问题的有效途径。

希望这篇“入门必看”指南能为你打开 antd 的大门，助你在前端开发的道路上更进一步。祝你学习愉快，编码顺利！

现在，是时候打开你的代码编辑器，开始用 antd 构建属于你的第一个漂亮应用了！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部