this paper introduces himself with react to write a paging component (summary), for everyone to share, as follows:

"_blank" rel= "external nofollow" >github

effect (style. Modify

 create-react-app react-paging-component

construction project

1. paging component sub component

create Pagecomponent.js file

core code:

 constructor pr (initial value Ops super (props)) {this.state {currentPage: = 1, groupCount: / / 5 / / the current page number, page number grouping, display 7 pages, the rest with an ellipsis startPage: 1 / / totalPage:1 / / packet start page}} 

the total number of pages dynamically generated

page

 createPage function () {const {currentPage, groupCount, startPage. TotalPage} = this.state; let = pages [] / / on page pages.push (< Li className={currentPage = 1? "Nomore": null} onClick={this.prePageHandeler.bind (this)} key={0}> a < /li> if (totalPage <); = 10) {/ * total page number less than or equal to 10, all 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>})} else {/ * total page number is greater than 10, part of the show * / / / first page of the pages.push (< Li; className={currentPage = 1? "ActivePage": null} key={1} (this, onClick={this.pageClick.bind 1)}> 1< /li> let) pageLength = 0; if (groupCount + startPage > totalPage) {pageLength} else {pageLength = totalPage = groupCount + startPage;} / / in front of the ellipsis (when displaying the current page number page number than ellipsis packet when the if (currentPage >); = {pages.push (groupCount) < Li className= "key={-1}>"; - < /li> }) / the first page and the last page display for (let I = startPage I; < pageLength; i++) {if (I = < totalPage 1 & & I > 1) {pages.push (< Li className={currentPage = I? "ActivePage": null} key={i} (this, onClick={this.pageClick.bind I}> {i}< /li>));}} / / ellipsis (totalPage - startPage > if = groupCount + 1) {pages.push (< Li "className=" key={-2}> - < /li>} / / the last page) pages.push (< Li className={currentPage totalPage = "activePage": null}? Key={totalPage} onClick={this.pageClick.bind (this, totalPage)}> {totalPage}< /li>} / / next page pages.pus) H (< Li className={currentPage = totalPage? "Nomore": null} onClick={this.nextPageHandeler.bind (this)} key={totalPage + 1}> a < /li> return pages;}) 

page click function:

/

 / page click on the pageClick (currentPage) {const {groupCount} = this.state const getCurrentPage = this.props.pageCallbackFn; / / when the current the page number is greater than a packet number, the current page displayed in front of two a number of if (currentPage > groupCount = this.setState (startPage:) {{currentPage}} - 2) if (currentPage < groupCount this.setState (startPage:) {{1}},) / / the first page to set the packet start page If (currentPage = 1) {this.setState ({startPage: 1}, this.setState)} ({currentPage}) / / the current page number returns the parent component getCurrentPage (currentPage)} 

on page and click on the summer event

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

to DOM

 rendering component re Nder (const) {pageList = this.createPage (return (UL); < className= "page-container" > {pageList} < /ul>}

2.;

) parent component to create Pagecontainer.js file

 import parent component complete code 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:} data.length {totalPage:} / / total page number this.getCurrentPage = this.getCurrentPage.bind (this) getCurrentPage (currentPage) {this.setState} ({dataList:data[curre NtPage-1].name (render)})} {return (< div> < div> {this.state.dataList} < /div> < Pagecomponent pageConfig={this.state.pageConfig} pageCallbackFn={this.getCurrentPage}/> < /div> export default Pagecontainer

)}} so far a paging component development finished, want to help everyone to learn, I hope you will support the script home.

: articles you may be interested in:

.


This concludes the body part

This paper fixed link:http://www.script-home.com/try-your-own-hands-on-using-react-to-write-a-paging-component-summary.html | Script Home | +Copy Link

Article reprint please specify:Try your own hands-on using react to write a paging component (summary) | Script Home

You may also be interested in these articles!