尝试自己动手用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

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

您可能感兴趣的文章: