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

本文介绍了尝试自己动手用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

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