成都网站建设设计

将想法与焦点和您一起共享

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

本文介绍了尝试自己动手用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(
  • 上一页
  • ) 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

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


    本文名称:尝试自己动手用react来写一个分页组件(小结)
    浏览路径:http://chengdu.cdxwcx.cn/article/pdedjp.html