本文介绍了尝试自己动手用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
至此一个分页组件就开发完了，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
asp.net中ajax和一般处理程序（handler.ashx）的交互
egg.js创建项目，目录介绍，简单使用，sequelize mysql使用
网友评论