antd：Ant Design of React 蚂蚁集团 React UI 组件库

❝

发布于 2023.06.06（芒种）

❞

Ant Design 是蚂蚁集团对外开源的一套 UI 设计，官方有针对这套设计的 react 实现，即 Ant Design of React，也就是我们熟知的 antd^[1]，主要用于研发企业级中后台产品，社区也有一些^[2]基于其他框架的实现。

官网地址：https://ant.design/docs/react/introduce-cn

创建样板项目

❝

官方没有这块例子，自己搭建！

❞

先创建一个样板项目（采用 Vite React TS 模板）：

❝

注意：为了更快的安装速度，我使用了 yarn 这个包管理器，没有安装的话可以通过 npm install -g yarn指令安装。

❞

PS D:learningantd-demos> yarn create vite
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@4.3.1" with binaries:
      - create-vite
      - cva
√ Project name: ... vite-project
√ Select a framework: » React
√ Select a variant: » TypeScript

Scaffolding project in D:learningantd-demosvite-project...

Done. Now run:

  cd vite-project
  yarn
  yarn dev

Done in 7.24s.

按照上述指示进入项目目录，安装依赖，启动开发环境。

PS D:learningantd-demosvite-project> yarn dev  
yarn run v1.22.19
$ vite

  VITE v4.3.5  ready in 357 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

安装 antd 依赖

执行指令：yarn add antd。

引入 antd

修改 App.tsx 文件，改成下面这样：

import { useState } from 'react'
import { ConfigProvider, DatePicker, DatePickerProps } from 'antd';
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/locale/zh_CN';
// antd 提供的重置样式库
import 'antd/dist/reset.CSS';

type DateType = Parameters<NonNullable<DatePickerProps['onChange']>>[0]

function App() {

  const [date, setDate] = useState<DateType>(null);

  function handleChange(value: DateType) {
    console.log('[handleChange]', value)
    setDate(value);
  }

  return (
    <>
      <div>
        <ConfigProvider locale={zhCN}>
          <DatePicker onChange={handleChange} />
          <div style={{ marginTop: 16 }}>
            当前日期：{date ? date.toLocaleString() : '未选择'}
          </div>
        </ConfigProvider>
      </div>
    </>
  )
}

export default App

<DatePicker> 的 onChange 事件提供的是 dayjs.Dayjs 类型，我这里没有引入，为了避免 TS 报错，我从 DatePickerProps['onChange'] 中解析出了类型用作事件处理器参数的类型声明。

不过最好还是使用 dayjs 依赖比较好。

引入 dayjs

yarn add dayjs

import { useState } from 'react'
import { ConfigProvider, DatePicker } from 'antd';
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/locale/zh_CN';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
// antd 提供的重置样式库
import 'antd/dist/reset.css';

+dayjs.locale('zh-cn');


function App() {

+ const [date, setDate] = useState<dayjs.Dayjs | null>(null);

+ function handleChange(value: dayjs.Dayjs | null) {
    console.log('[handleChange]', value)
    setDate(value);
  }

  return (
    <>
      <div>
        <ConfigProvider locale={zhCN}>
          <DatePicker onChange={handleChange} />
          <div style={{ marginTop: 16 }}>
+            当前日期：{date ? date.format('YYYY年MM月DD日') : '未选择'}
          </div>
        </ConfigProvider>
      </div>
    </>
  )
}

export default App;

效果：

引入 Alert 组件

- import { ConfigProvider, DatePicker } from 'antd';
+ import { ConfigProvider, DatePicker, Alert } from 'antd';

- 当前日期：{date ? date.format('YYYY-MM-DD') : '未选择'}
+ <Alert message="当前日期" description={date ? date.format('YYYY年MM月DD日') : '未选择'} />

效果：