react分页组件rc-pagination再封装-CSDN博客

本文介绍了在React中对rc-pagination组件进行再封装的好处，如减少重复代码和集中管理，详细说明了封装过程，包括安装特定版本的rc-pagination库，并展示了在页面状态变更时如何根据新页码加载列表。

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

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, 最后按照新的页码重新去加载列表