本文介紹了嘗試自己動手用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至此一個分頁組件就開發完了，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
