【React全家桶入门之十一】引入AntDesign组件库

最新推荐文章于 2025-03-27 09:00:00 发布

wei_yiyi

最新推荐文章于 2025-03-27 09:00:00 发布

阅读量2.7k

点赞数

分类专栏： React

React 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何通过AntDesign组件库提升React应用的界面美观度，包括安装配置、按需加载及实现产品级UI的过程。

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

 版权声明：本文为博主原创文章，转载请注明来源。博客地址：http://blog.youkuaiyun.com/awaw00

 目录(?)[+]

我们的管理系统已经有了图书、用户的增删改查以及登录功能了，可谓是五脏俱全，就是丑了点~

是不是已经有些厌倦我们系统里的白底黑字和灰色框框了？

打起精神，本篇带你使用 AntDesign 组件库为我们的系统换上产品级的UI！

安装组件库

在项目目录下执行：npm i antd -S 安装组件包
执行：npm i babel-plugin-import -D 安装一个babel插件用于做组件的按需加载（否则项目会打包整个组件库，非常大）
根目录下新建.roadhogrc文件（别忘了前面的点，这是roadhog工具的配置文件，下面的代码用于加载上一个命令安装的import插件），写入：

{
  "extraBabelPlugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "lib",
      "style": "css"
    }]
  ]
}改造HomeLayout
我们计划把系统改造成这个样子：
上方显示LOGO，下方左侧显示一个菜单栏，右侧显示页面的主要内容。
所以新的HomeLayout应该包括LOGO和Menu部分，然后HomeLayout的children放置在Content区域。
Menu我们使用AntDesign提供的Menu组件来完成，菜单项为：
   
   用户管理 

     
     用户列表
添加用户
图书管理 

     
     图书列表
添加图书
来看新的组件代码：
import React from 'react';
import { Link } from 'react-router';
import { Menu, Icon } from 'antd';
import style from '../styles/home-layout.less';

const SubMenu = Menu.SubMenu;
const MenuItem = Menu.Item;

class HomeLayout extends React.Component {
  render () {
    const {children} = this.props;
    return (
      <div>
        <header className={style.header}>
          <Link to="/">ReactManager</Link>
        </header>

        <main className={style.main}>
          <div className={style.menu}>
            <Menu mode="inline" theme="dark" style={{width: '240px'}}>
              <SubMenu key="user" title={<span><Icon type="user"/><span>用户管理</span></span>}>
                <MenuItem key="user-list">
                  <Link to="/user/list">用户列表</Link>
                </MenuItem>
                <MenuItem key="user-add">
                  <Link to="/user/add">添加用户</Link>
                </MenuItem>
              </SubMenu>

              <SubMenu key="book" title={<span><Icon type="book"/><span>图书管理</span></span>}>
                <MenuItem key="book-list">
                  <Link to="/book/list">图书列表</Link>
                </MenuItem>
                <MenuItem key="book-add">
                  <Link to="/book/add">添加图书</Link>
                </MenuItem>
              </SubMenu>
            </Menu>
          </div>

          <div className={style.content}>
            {children}
          </div>
        </main>
      </div>
    );
  }
}

export default HomeLayout;
    
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
    
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

HomeLayout引用了/src/styles/home-layout.less这个样式文件，样式代码为：
.main {
  height: 100vh;
  padding-top: 50px;
}

.header {
  position: absolute;
  top: 0;
  height: 50px;
  width: 100%;
  font-size: 18px;
  padding: 0 20px;
  line-height: 50px;
  background-color: #108ee9;
  color: #fff;

  a {
    color: inherit;
  }
}

.menu {
  height: 100%;
  width: 240px;
  float: left;
  background-color: #404040;
}

.content {
  height: 100%;
  padding: 12px;
  overflow: auto;
  margin-left: 240px;
  align-self: stretch;
}
    
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
    
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

现在的首页是这个样子：



逼格立马就上来了有没？