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

本文介绍了尝试自己动手用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={currentpage === i ? "activepage" : null}>{i}</li>)
      }
    } else {
      /*总页码大于10时，部分显示*/

      //第一页
      pages.push(<li classname={currentpage === 1 ? "activepage" : null} key={1}
              onclick={this.pageclick.bind(this, 1)}>1</li>)

      let pagelength = 0;
      if (groupcount + startpage > totalpage) {
        pagelength = totalpage
      } else {
        pagelength = groupcount + startpage;
      }
      //前面省略号(当当前页码比分组的页码大时显示省略号)
      if (currentpage >= groupcount) {
        pages.push(<li classname="" key={-1}>···</li>)
      }
      //非第一页和最后一页显示
      for (let i = startpage; i < pagelength; i++) {
        if (i <= totalpage - 1 && i > 1) {
          pages.push(<li classname={currentpage === i ? "activepage" : null} key={i}
                  onclick={this.pageclick.bind(this, i)}>{i}</li>)
        }
      }
      //后面省略号
      if (totalpage - startpage >= groupcount + 1) {
        pages.push(<li classname="" key={-2}>···</li>)
      }
      //最后一页
      pages.push(<li classname={currentpage === totalpage ? "activepage" : null} key={totalpage}
              onclick={this.pageclick.bind(this, totalpage)}>{totalpage}</li>)
    }
    //下一页
    pages.push(<li classname={currentpage === totalpage ? "nomore" : null}
            onclick={this.nextpagehandeler.bind(this)}
            key={totalpage + 1}>下一页</li>)
    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 (
      <ul classname="page-container">
        {pagelist}
      </ul>
    )
  }

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 (
      <div>
        <div>
          {this.state.datalist}
        </div>
        <pagecomponent pageconfig={this.state.pageconfig}
                pagecallbackfn={this.getcurrentpage}/>
      </div>

    )
  }
}
export default pagecontainer

至此一个分页组件就开发完了，希望对大家的学习有所帮助，也希望大家多多支持。