Ant Design 组件库快速上手

程序员NEO

发布于 2025-03-07 09:12:50

6260

一、前言

• 🐤本篇文章是『从零玩转 TypeScript + React 项目实战』系列文章的第 1 篇，主要介绍『Ant Design』的使用
• 通过前面文章我出过一个 React 系列全集，已经将 React 全部的基础知识介绍了一遍，那么了解完毕了 React 之后，接下来就开始编写一个项目实战文章系列了
• 但是在编写之前，还有一些知识点给大家介绍一下，这些知识点是在项目实战中会用到的，所以在开始项目实战之前，我们先来了解一下这些知识点

二、Ant Design

本次文章标题是『Ant Design』所以首先要介绍的是一个叫做 Ant Design 的东西，那么这个『Ant Design』是什么呢？它是一个什么样的东西呢？它是一个 UI 框架，它是一个基于 React 的 UI 框架，它是一个非常优秀的 UI 框架。

1. 什么是 Ant Design

antd 是 蚂蚁金服 开源的 React UI 组件库，主要用于研发 企业级中后台 产品。

• 也就是说它帮我们封装了一些很常用的 UI
• 在企业开发中它可以帮助我们提升开发效率

😀那么简单的来理解这个『Ant Design』，它其实就是 React 版本的 Element UI

2. Ant Design 特点

• 🌈 提炼自企业级中后台产品的交互语言和视觉风格
• 📦 开箱即用的高质量 React 组件
• 🛡 使用 TypeScript 开发，提供完整的类型定义文件
• ⚙ 全链路开发和设计工具体系（业务战略-用户场景-设计目标-交互体验-用户流程-预期效率等全方面考虑和分析）
• 🌍 数十个 国际化语言 支持
• 🎨 深入每个细节的主题定制能力
• 特点其实不用看了，就是牛叉就可以了，特点最核心的就是使用 TypeScript 来开发的，提供了完整的 TypeScript 类型定义文件
• 也就是说你可以在 TypeScript 项目当中，来直接使用 Ant Design

3. Ant Design 兼容性

• antd@2.0 之后不再支持 IE8
• antd@4.0 之后不再支持 React 15 和 IE9/10
• antd@5.0 之后不再支持 IE

2024-1-20 当前最新版本是 antd@5.13.2：

如果说你的需求需要兼容低版本的浏览器，这个 Ant Design 就不适合你了。

但是至今为止，除了开发一些政府项目以外，在企业级开发当中，我们都是不需要去兼容 IE，不需要去兼容 IE 低版本的，一般情况下兼容到 IE11，或者兼容到 Edge 就可以了。

总结下来就是：如果你不是做政府项目的话是不用去考虑的

三、Ant Design 使用

市面上非常多的 UI 框架，总不能全部都去学习一遍，所以我们在使用的时候直接去打开官方文档按照对应的步骤来抄写即可，官方文档地址: https://ant.design/index-cn

点击 开始使用，会默认跳转到组件页面，再点击 研发：

好，再开始使用之前，首先如果你还没有创建好项目你可以通过：https://www.cnblogs.com/BNTang/articles/16125436.html 这篇文章来通过 React 脚手架来创建一个项目，然后再来使用 Ant Design。

创建过程我这里也贴一下我正好也是在创建一个项目，我这里创建的项目名称是 antd-demo, 首先安装 create-react-app：

npm install -g create-react-app

使用 create-react-app 创建项目：

create-react-app antd-demo

等待等待，漫长的等待即可。

上图可以看到已经创建成功，可以通过 npm start 试着启动一下：

运行效果：

好的，到这里，React 项目咱们已经创建完毕了，接下来继续讲本文要介绍的内容，使用 Ant Design。

安装 Ant Design, 学习过 Node 的同学大家通过都知道，首先要安装对应的依赖：

npm install antd --save

到这里项目创建好了，Ant Design 也安装好了，接下来就是使用 Ant Design 了，那么如何使用呢？我们可以通过官方文档来查看，点击 组件：

组件非常的多这里我就挑几个常用的来介绍一下，比如说 Button，点击 Button：

点击显示代码，可以看到代码如下：

将代码拷贝到 App 组件当中：

import { Button } from 'antd';

function App() {
  return (
      <>
          <Button type="primary">Primary Button</Button>
          <Button>Default Button</Button>
          <Button type="dashed">Dashed Button</Button>
          <Button type="text">Text Button</Button>
          <Button type="link">Link Button</Button>
      </>
  );
}

export default App;

如上代码采用 <> </> 这种写法，这种写法叫做 Fragment，它是 React 16.2 之后才有的，它的作用就是可以在不增加额外节点的情况下，让 render() 方法中返回多个元素。

运行效果：

• 通过上面的代码我们可以看到，我们在使用 Ant Design 的时候，其实就是在使用它提供的组件

看了一个组件，那么我们再来看一个组件，比如说 Switch，点击 Switch：

首先导入 Switch 组件：

import {Button, Switch} from 'antd';

然后将 Switch 组件放到 App 组件当中：

<Switch defaultChecked onChange={onChange} />

使用到了 onChange 方法，所以我们需要在 App 组件当中定义一个 onChange 方法：

const onChange = (checked: boolean) => {
    console.log(`switch to ${checked}`);
};

完整代码：

import {Button, Switch} from'antd';

functionApp() {
    constonChange = (checked: boolean) => {
        console.log(`switch to ${checked}`);
    };
    return (
        <>
            <Button type="primary">Primary Button</Button>
            <Button>Default Button</Button>
            <Button type="dashed">Dashed Button</Button>
            <Button type="text">Text Button</Button>
            <Button type="link">Link Button</Button>
            <Switch defaultChecked onChange={onChange}/>
        </>
    );
}

exportdefaultApp;

运行效果：