尝试自己动手用react来写一个分页组件

原文地址：戳这里

分页效果

在线预览

github地址

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

构建项目

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=<