react 引入antd 样式_react 项目实战（十）引入AntDesign组件库

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

安装组件库

在项目目录下执行：npm i [email protected] -S 或 yarn add antd安装组件包

执行：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';

// Menu 导航菜单 Icon 图标

import { Menu, Icon } from 'antd';

import '../styles/home-layout.less';

// 左侧菜单栏

const SubMenu = Menu.SubMenu;

class HomeLayout extends React.Component {

render () {

const {children} = this.props;

return (

ReactManager

用户管理}>

用户列表

添加用户

图书管理}>

图书列表

添加图书

{children}

);

}

}

export default HomeLayout;

HomeLayout引用了/src/styles/home-layout.less这个样式文件，样式代码为：

@import '~antd/dist/antd.css'; // 引入antd样式表

.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;

}

现在的首页是这个样子：

逼格立马就上来了有没？

改造HomePage

由于现在有菜单了，就不需要右侧那个HomePage里的链接了，把他去掉，然后放个Welcome吧(HomeLayout也去掉了，在下面会提到)：

src / pages / Home.js

/**

* 主页

*/

import React from 'react';

// 引入样式表

import '../styles/home-page.less';

class Home extends React.Component {

// 构造器

constructor(props) {

super(props);

// 定义初始化状态

this.state = {};

}

render() {

return (

Welcome

);

}

}

export default Home;

新增样式文件/src/styles/home-page.less，代码：

.welcome{

width: 100%;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

font-size: 32px;

}

优化HomeLayout使用方式

现在的HomeLayout里有一个菜单了，菜单有展开状态需要维护，如果还是像以前那样在每个page组件里单独使用HomeLayout，会导致菜单的展开状态被重置(跳转页面之后都会渲染一个新的HomeLayout)，所以需要将HomeLayout放到父级路由中来使用：

src / index.js

/**

* 配置路由

*/

import React from 'react';

import ReactDOM from 'react-dom';

// 引入react-router

import { Router, Route, hashHistory } from 'react-router';

// 引入布局组件

import HomeLayout from './layouts/HomeLayout';

import HomePage from './pages/Home'; // 首页

import LoginPage from './pages/Login'; // 登录页

import UserAddPage from './pages/UserAdd'; // 添加用户页

import UserListPage from './pages/UserList'; // 用户列表页

import UserEditPage from './pages/UserEdit'; // 用户编辑页面

import BookAddPage from './pages/BookAdd'; // 添加图书页

import BookListPage from './pages/BookList'; // 图书列表页

import BookEditPage from './pages/BookEdit'; // 用户编辑页面

// 渲染

ReactDOM.render((

), document.getElementById('root'));

效果图：

然后需要在各个页面中移除HomeLayout：

src / pages / BookAdd.js

/**

* 图书添加页面

* 这个组件除了返回BookEditor没有做任何事，其实可以直接export default BookEditor

*/

import React from 'react';

// 编辑组件

import BookEditor from '../components/BookEditor';

class BookAdd extends React.Component {

render() {

return (

);

}

}

export default BookAdd;

src / pages / BookEdit.js

...

render () {

const {book} = this.state;

return book ? : 加载中...;

}

...

src / pages / BookList.js

...

render () {

...

return (

...

);

}

...

剩下的UserAdd.js、UserEdit.js、UserList.js与上面Book对应的组件做相同更改。

还有登录页组件在下面说。

升级登录页面

下面来对登录页面进行升级，修改/src/pages/Login.js文件：

/**

* 登录页

*/

import React from 'react';

// 引入antd组件

import { Icon, Form, Input, Button, message } from 'antd';

// 引入 封装后的fetch工具类

import { post } from '../utils/request';

// 引入样式表

import styles from '../styles/login-page.less';

// 引入 prop-types

import PropTypes from 'prop-types';

const FormItem = Form.Item;

class Login extends React.Component {

// 构造器

<