Home >Web Front-end >JS Tutorial >Implement paging components using react
This article mainly introduces the attempt to use react to write a paging component by yourself (summary). Now I share it with you and give it as a reference.
This article introduces the attempt to use react to write a paging component by yourself (summary) and shares it with everyone. The details are as follows:
Paging effect
Online preview
github address
Screenshot of the effect (the style can be modified by yourself):
Build the project
create-react-app react-paging-component
Paging component
1. Subcomponent
Create Pagecomponent.js file
Core code:
Initialization value
constructor(props) { super(props) this.state = { currentPage: 1, //当前页码 groupCount: 5, //页码分组,显示7个页码,其余用省略号显示 startPage: 1, //分组开始页码 totalPage:1 //总页数 } }
Dynamic generation of page number function
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; }
Page number click function:
//页码点击 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) }
Previous page and summer night click event
//上一页事件 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) }
The component is rendered to the DOM
render() { const pageList = this.createPage(); return ( <ul className="page-container"> {pageList} </ul> ) }
2. Parent component
Create Pagecontainer.js file
Complete code of parent component
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 ( <p> <p> {this.state.dataList} </p> <Pagecomponent pageConfig={this.state.pageConfig} pageCallbackFn={this.getCurrentPage}/> </p> ) } } export default Pagecontainer
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to use filters in the Vue2.0 series?
How to return to the top through the tween method in the vue project
How to use vue to determine that the input content is all spaces?
The above is the detailed content of Implement paging components using react. For more information, please follow other related articles on the PHP Chinese website!