原文地址:戳这里
分页效果
效果截图(样式可自行修改):
构建项目
create-react-app react-paging-component
分页组件
1.子组件
创建 Pagecomponent.js 文件
核心代码:
初始化值
constructor(props) {
super(props)
this.state = {
currentPage: 1, //当前页码
groupCount: 5, //页码分组,显示7个页码,其余用省略号显示
startPage: 1, //分组开始页码
totalPage:1 //总页数
}
}
动态生成页码函数
createPage() {
const {
currentPage, groupCount, startPage,totalPage} = this.state;
let pages = []
//上一页
pages.push(<li className={
currentPage === 1 ? "nomore" : null} onClick={
this.prePageHandeler.bind(this)}
key={
0}>
上一页</li>)
if (totalPage <= 10) {
/*总页码小于等于10时,全部显示出来*/
for (let i = 1; i <= totalPage; i++) {
pages.push(<li key={
i} onClick={
this.pageClick.bind(this, i)}
className=<