Ant Design of React

最新推荐文章于 2025-04-21 11:25:00 发布

Curry 3O

最新推荐文章于 2025-04-21 11:25:00 发布

阅读量371

点赞数

分类专栏： React Antd

本文链接：https://blog.youkuaiyun.com/qq_42552393/article/details/100051355

版权

本文详细介绍了如何在create-react-app中安装和使用Ant Design of React组件库，包括安装初始化、按需加载组件、自定义主题以及在实际项目中使用Button、树形控件和表格的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Ant Design of React介绍

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

特性

提炼自企业级中后台产品的交互语言和视觉风格
开箱即用的高质量 React 组件
使用 TypeScript 构建，提供完整的类型定义文件
全链路开发和设计工具体系

支持环境

现代浏览器和 IE9 及以上（需要 polyfills）
支持服务端渲染
Electron

二、在 create-react-app 中安装

create-react-app 是业界最优秀的 React 应用开发工具之一，本文会尝试在 create-react-app 创建的工程中使用 antd 组件，并自定义 webpack 的配置以满足各类工程化需求。

1.安装和初始化

$ yarn create-react-app antd-demo

2.进入项目并启动

$ cd antd-demo
$ yarn start

3.引入 antd

$ yarn add antd
//或者也可以
$ cnpm install --save antd

4.使用 react-app-rewired 对 create-react-app 的默认配置进行自定义

$ yarn add react-app-rewired customize-cra
//或者也可以
$ cnpm install --save react-app-rewired customize-cra

5.修改 package.json 里的启动配置

- 代表原来package.json 文件中默认生成的，+ 表示我们需要手动添加的，把默认的覆盖

/* package.json */
"scripts": {
   
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

6.使用 babel-plugin-import 用于按需加载组件代码和样式的 babel 插件

$ yarn add babel-plugin-import
//或者也可以
$ cnpm install --save babel-plugin-import

7.自定义主题

$ yarn add less less-loader
//或者也可以
$ cnpm install --save less less-loader

8.在项目(antd-demo)根目录创建一个 `config-overrides.js` 用于修改默认配置

在config-overrides.js文件中添加以下内容

const {
    override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
   
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
   
        javascriptEnabled: true,
        modifyVars: {
   
            '@primary-color': '#1DA57A'
        },
    }),
);

三、在 create-react-app 中使用

1.Button按钮实例

需要在文件中导入: import { Button } from 'antd';

import React, {
    Component } from 'react';
import {
   Button} from 'antd';
class MyBtn extends Component {
   
    state = {
   
        loading: false,
        iconLoading: false,
    };
    enterLoading = ()