尝试自己动手用react来写一个分页组件(小结)

尝试自己动手用react来写一个分页组件(小结)

本文介绍了尝试自己动手用react来写一个分页组件(小结)，分享给大家，具体如下：

分页效果

在线预览

github地址

效果截图（样式可自行修改）：

构建项目

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(

key={0}>

上一页

if (totalPage <= 10) {

/*总页码小于等于10时，全部显示出来*/

for (let i = 1; i <= totalPage; i++) {

pages.push(

className={currentPage === i ? "activePage" : null}>{i}

}

} else {

/*总页码大于10时，部分显示*/

//第一页

pages.push(

onClick={this.pageClick.bind(this, 1)}>1

let pageLength = 0;

if (groupCount + startPage > totalPage) {

pageLength = totalPage

} else {

pageLength = groupCount + startPage;

}

//前面省略号(当当前页码比分组的页码大时显示省略号)

if (currentPage >= groupCount) {

pages.push(

}

//非第一页和最后一页显示

for (let i = startPage; i < pageLength; i++) {

if (i <= totalPage - 1 && i > 1) {

pages.push(

onClick={this.pageClick.bind(this, http://i)}>{i}

}

}

//后面省略号

if (totalPage - startPage >= grouhttp://pCount + 1) {

pages.push(

}

//最后一页

pages.push(

onClick={this.pageClick.bind(this, totalPage)}>{totalPage}

}

//下一页

pages.push(

onClick={this.nextPageHandeler.bind(this)}

key={totalPage + 1}>下一页

return pages;

}

页码点击函数:

//页码点击

pageClick(currentPage) {

const {groupCount} = this.state

const getCurrhttp://entPage = 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 (

{pageList}

)

}

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 (

{this.state.dataList}

pageCallbackFn={this.getCurrentPage}/>

pageCallbackFn={this.getCurrentPage}/>

)

}

}

export default Pagecontainer

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。