Try to use react to write a paging component (Summary), react Paging

Try to use react to write a paging component (Summary), react Paging

This article describes how to use react to write a paging component (Summary) and share it with you as follows:

Paging Effect

Online Preview

Github address

Effect (the style can be modified by yourself ):

Build a project

create-react-app react-paging-component

Paging component

1. Child Components

Create a Pagecomponent. js File

Core code:

Initialization value

Constructor (props) {super (props) this. state = {currentPage: 1, // the current page number groupCount: 5, // page number group, displays 7 page numbers, and other uses ellipsis to display startPage: 1, // The Group start page number totalPage: 1 // total number of pages }}

Dynamic page number generation function

CreatePage () {const {currentPage, groupCount, startPage, totalPage} = this. state; let pages = [] // previous pages. push (<li className = {currentPage = 1? "Nomore": null} onClick = {this. prePageHandeler. bind (this)} key = {0}> previous page </li>) if (totalPage <= 10) {/* when the total page number is less than or equal to 10, all are displayed */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>) }} when the total else {/* page number is greater than 10, the first page of pages is displayed. 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;} // The ellipsis (The ellipsis is displayed when the page number of the score group is large) if (currentPage> = groupCount) {pages. push (<li className = "" key = {-1} >· · </li>)} // for (let I = startPage) is not displayed on the first and last pages; 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>) }// the ellipsis (if) (totalPage-startPage> = groupCount + 1) {pages. push (<li className = "" key = {-2} >· · </li>)} // pages on the last page. push (<li className = {currentPage = totalPage? "ActivePage": null} key = {totalPage} onClick = {this. pageClick. bind (this, totalPage) }>{ totalPage} </li>)} // next page pages. push (<li className = {currentPage = totalPage? "Nomore": null} onClick = {this. nextPageHandeler. bind (this)} key = {totalPage + 1}> next page </li>) return pages ;}

Page number click function:

// Click pageClick (currentPage) {const {groupCount} = this. state const getCurrentPage = this. props. pageCallbackFn; // when the current page number is greater than the group page number, make the current page display two pages above if (currentPage> = groupCount) {this. setState ({startPage: currentPage-2,})} if (currentPage <groupCount) {this. setState ({startPage: 1,})} // reset the Group start page if (currentPage = 1) {this. setState ({startPage: 1,})} this. setState ({currentPage}) // return the current page number to the parent component getCurrentPage (currentPage )}

Previous Page and summer night click events

// PrePageHandeler () {let {currentPage} = this. state if (-- currentPage = 0) {return false} this. pageClick (currentPage)} // next page event nextPageHandeler () {let {currentPage, totalPage} = this. state // const {totalPage} = this. props. pageConfig; if (++ currentPage> totalPage) {return false} this. pageClick (currentPage )}

Component rendering to DOM

render() {    const pageList = this.createPage();    return (      <ul className="page-container">        {pageList}      </ul>    )  }

2. Parent component

Create a Pagecontainer. js File

Complete code of the 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 // total page number} this. getCurrentPage = this. getCurrentPage. bind (this)} getCurrentPage (currentPage) {this. setState ({dataList: data [currentPage-1]. name})} render () {return (<div> {this. state. dataList }</div> <Pagecomponent pageConfig = {this. state. pageConfig} pageCallbackFn = {this. getCurrentPage}/> </div>)} export default Pagecontainer

At this point, the development of a paging component is complete. I hope it will be helpful for everyone's learning, and I hope everyone can support the help house.