1. 再封装组件的好处
拿 rc-pagiantion组件来举例:
import RcPagination from 'rc-pagination';
import 'rc-pagination/assets/index.css';
<RcPagination hideOnSinglePage showQuickJumper />
(1) 减少重复代码: 封装前每次你使用这个插件你都需要引入这个组件和它的css, 封装后你就不用引入css了
(2) 代码更集中: 你的import是在文件最上面的,但是<RcPagination />
是写在render里面, 两段代码分布在文件的不同位置, 不方便管理
2. 代码
2.1 定义
需要自己yarn/npm先安装rc-pagination插件
注意:默认安装的是2.2.0, 但是有点bug, 推荐安装1.15.0
import React from 'react';
import RcPagination from 'rc-pagination';
import 'rc-pagination/assets/index.css';
// 通用分页组件
class Pagination extends React.Component {
render () {
return (
<div className="row">
<div className="col-md-12">
<RcPagination {...this.props}
hideOnSinglePage
showQuickJumper/>
</div>
</div>
);
}
}
export default Pagination;
2.2 使用
import Pagination from 'util/pagination/index.jsx';
// 页码改变
onPageNumChange(pageNum) {
this.setState({
pageNum: pageNum
}, () => {
this.loadUserList()
})
}
render () {
return (
<div id="page-wrapper">
<PageTitle title="用户列表" />
<TableList tableHeads={['ID', '用户名', '邮箱', '电话', '注册时间']}>
{ tbody }
</TableList>
<Pagination
current={ this.state.pageNum }
total={ this.state.total }
onChange={ pageNum => this.onPageNumChange(pageNum)} />
</div>
);
}
当页码改变的时候, 获取新页码pageNum, 然后setState, 最后按照新的页码重新去加载列表