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

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

分页效果

在线预览

github地址

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

构建项目

rush:plain;"> create-react-app react-paging-component

分页组件

1.子组件

创建 Pagecomponent.js 文件

核心代码：

初始化值

rush:js;"> constructor(props) { super(props) this.state = { currentPage: 1,//当前页码 groupCount: 5,//页码分组，显示7个页码，其余用省略号显示 startPage: 1,//分组开始页码 totalPage:1 //总页数 } }

动态生成页码函数

rush:js;"> createPage() { const {currentPage,groupCount,startPage,totalPage} = this.state; let pages = [] //上一页 pages.push(

上一页

)

if (totalPage <= 10) {
  /*总<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a>小于等于10时，全部<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>出来*/
  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 {
  /*总<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a>大于10时，部分<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>*/

  //第一页
  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;
  }
  //前面省略号(当当前<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a>比分组的<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a>大时<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>省略号)
  if (currentPage >= groupCount) {
    pages.push(<li className="" key={-1}>···</li>)
  }
  //非第一页和最后一页<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>
  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>)
}
//<a href="https://www.jb51.cc/tag/xiayiye/" target="_blank" class="keywords">下一页</a>
pages.push(<li className={currentPage === totalPage ? "nomore" : null}
        onClick={this.nextPageHandeler.bind(this)}
        key={totalPage + 1}><a href="https://www.jb51.cc/tag/xiayiye/" target="_blank" class="keywords">下一页</a></li>)
return pages;

}

页码点击函数:

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

上一页和夏夜点击事件

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

组件渲染到DOM上

rush:js;"> render() { const Pagelist = this.createPage(); return (

Pagelist}

) }

2.父组件

创建 Pagecontainer.js 文件

父组件完整代码

rush: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

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