欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-08 23:06:52
本文介绍了尝试自己动手用react来写一个分页组件(小结),分享给大家,具体如下: 分页效果 github地址 效果截图(样式可自行修改): 构建项目...

本文介绍了尝试自己动手用react来写一个分页组件(小结),分享给大家,具体如下:

分页效果

github地址

效果截图(样式可自行修改):

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

构建项目

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

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