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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.