分页效果

效果截图（样式可自行修改）：

构建项目

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(
            上一页
)        if (totalPage <= 10) {            /*总页码小于等于10时，全部显示出来*/            for (let i = 1; i <= totalPage; i++) {                pages.push(
{i}
)            }        } else {            /*总页码大于10时，部分显示*/            //第一页            pages.push(
1
)            let pageLength = 0;            if (groupCount + startPage > totalPage) {                pageLength = totalPage            } else {                pageLength = groupCount + startPage;            }            //前面省略号(当当前页码比分组的页码大时显示省略号)            if (currentPage >= groupCount) {                pages.push(
···
)            }            //非第一页和最后一页显示            for (let i = startPage; i < pageLength; i++) {                if (i <= totalPage - 1 && i > 1) {                    pages.push(
{i}
)                }            }            //后面省略号            if (totalPage - startPage >= groupCount + 1) {                pages.push(
···
)            }            //最后一页            pages.push(
{totalPage}
)        }        //下一页        pages.push(
下一页
)        return pages;    }

页码点击函数:

//页码点击    pageClick(currentPage) {        const {groupCount} = this.state        const getCurrentPage = this.props.pageCallbackFn;        //当 当前页码 大于 分组的页码 时，使 当前页 前面 显示 两个页码        if (currentPage >= groupCount) {            this.setState({                startPage: currentPage - 2,            })        }        if (currentPage < groupCount) {            this.setState({                startPage: 1,            })        }        //第一页时重新设置分组的起始页        if (currentPage === 1) {            this.setState({                startPage: 1,            })        }        this.setState({            currentPage        })        //将当前页码返回父组件        getCurrentPage(currentPage)    }

上一页和下一页点击事件

//上一页事件    prePageHandeler() {        let {currentPage} = this.state        if (--currentPage === 0) {            return false        }        this.pageClick(currentPage)    }    //下一页事件    nextPageHandeler() {        let {currentPage,totalPage} = this.state       // const {totalPage} = this.props.pageConfig;        if (++currentPage > totalPage) {            return false        }        this.pageClick(currentPage)    }

组件渲染到DOM上

render() {        const pageList = this.createPage();        return (            
    
                     {pageList}            
    
        )    }

2.父组件

创建 Pagecontainer.js 文件

父组件完整代码

import React, {Component} from 'react'import Pagecomponent from '../components/Pagecomponent'import data from '../mock/tsconfig.json'class Pagecontainer extends Component {    constructor() {        super()        this.state = {            dataList:[],            pageConfig: {                totalPage: data.length //总页码            }        }        this.getCurrentPage = this.getCurrentPage.bind(this)    }    getCurrentPage(currentPage) {        this.setState({            dataList:data[currentPage-1].name        })    }    render() {        return (            
    
                
     
                          {this.state.dataList}                
     
                
                 
     
    
        )    }}export default Pagecontainer

至此一个分页组件就开发完了，如有疑问欢迎到我个人博客的该文章下留言，

打个小广告~~~~欢迎访问我的个人博客