嘗試自己動(dòng)手用react來(lái)寫(xiě)一個(gè)分頁(yè)組件(小結(jié))
本文介紹了嘗試自己動(dòng)手用react來(lái)寫(xiě)一個(gè)分頁(yè)組件(小結(jié)),分享給大家,具體如下:
分頁(yè)效果
效果截圖(樣式可自行修改):
構(gòu)建項(xiàng)目
create-react-app react-paging-component
分頁(yè)組件
1.子組件
創(chuàng)建 Pagecomponent.js 文件
核心代碼:
初始化值
constructor(props) { super(props) this.state = { currentPage: 1, //當(dāng)前頁(yè)碼 groupCount: 5, //頁(yè)碼分組,顯示7個(gè)頁(yè)碼,其余用省略號(hào)顯示 startPage: 1, //分組開(kāi)始頁(yè)碼 totalPage:1 //總頁(yè)數(shù) } }
動(dòng)態(tài)生成頁(yè)碼函數(shù)
createPage() { const {currentPage, groupCount, startPage,totalPage} = this.state; let pages = [] //上一頁(yè) pages.push(<li className={currentPage === 1 ? "nomore" : null} onClick={this.prePageHandeler.bind(this)} key={0}> 上一頁(yè)</li>) if (totalPage <= 10) { /*總頁(yè)碼小于等于10時(shí),全部顯示出來(lái)*/ 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 { /*總頁(yè)碼大于10時(shí),部分顯示*/ //第一頁(yè) 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; } //前面省略號(hào)(當(dāng)當(dāng)前頁(yè)碼比分組的頁(yè)碼大時(shí)顯示省略號(hào)) if (currentPage >= groupCount) { pages.push(<li className="" key={-1}>···</li>) } //非第一頁(yè)和最后一頁(yè)顯示 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>) } } //后面省略號(hào) if (totalPage - startPage >= groupCount + 1) { pages.push(<li className="" key={-2}>···</li>) } //最后一頁(yè) pages.push(<li className={currentPage === totalPage ? "activePage" : null} key={totalPage} onClick={this.pageClick.bind(this, totalPage)}>{totalPage}</li>) } //下一頁(yè) pages.push(<li className={currentPage === totalPage ? "nomore" : null} onClick={this.nextPageHandeler.bind(this)} key={totalPage + 1}>下一頁(yè)</li>) return pages; }
頁(yè)碼點(diǎn)擊函數(shù):
//頁(yè)碼點(diǎn)擊 pageClick(currentPage) { const {groupCount} = this.state const getCurrentPage = this.props.pageCallbackFn; //當(dāng) 當(dāng)前頁(yè)碼 大于 分組的頁(yè)碼 時(shí),使 當(dāng)前頁(yè) 前面 顯示 兩個(gè)頁(yè)碼 if (currentPage >= groupCount) { this.setState({ startPage: currentPage - 2, }) } if (currentPage < groupCount) { this.setState({ startPage: 1, }) } //第一頁(yè)時(shí)重新設(shè)置分組的起始頁(yè) if (currentPage === 1) { this.setState({ startPage: 1, }) } this.setState({ currentPage }) //將當(dāng)前頁(yè)碼返回父組件 getCurrentPage(currentPage) }
上一頁(yè)和夏夜點(diǎn)擊事件
//上一頁(yè)事件 prePageHandeler() { let {currentPage} = this.state if (--currentPage === 0) { return false } this.pageClick(currentPage) } //下一頁(yè)事件 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.父組件
創(chuàng)建 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 //總頁(yè)碼 } } 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
至此一個(gè)分頁(yè)組件就開(kāi)發(fā)完了,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React報(bào)錯(cuò)Element type is invalid解決案例
這篇文章主要為大家介紹了React報(bào)錯(cuò)Element type is invalid解決案例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12react實(shí)現(xiàn)路由動(dòng)畫(huà)跳轉(zhuǎn)功能
這篇文章主要介紹了react路由動(dòng)畫(huà)跳轉(zhuǎn)功能,大概思路是下載第三方庫(kù)?引用,創(chuàng)建css文件引用,想要實(shí)現(xiàn)跳轉(zhuǎn)動(dòng)畫(huà)功能,就在那個(gè)組件的根節(jié)點(diǎn)綁定classname屬性即可,在跳轉(zhuǎn)的時(shí)候即可實(shí)現(xiàn),需要的朋友可以參考下2023-10-10關(guān)于React Native 無(wú)法鏈接模擬器的問(wèn)題
許多朋友遇到React Native 無(wú)法鏈接模擬器的問(wèn)題,怎么解決呢,本文給大家分享完整簡(jiǎn)便解決方法及配置例題,對(duì)React Native 鏈接模擬器相關(guān)知識(shí)感興趣的朋友一起看看吧2021-06-06