本文介绍了尝试自己动手用react来写一个分页组件(小结)，分享给大家，具体如下：
分页效果
构建项目
分页组件
1.子组件
创建 Pagecomponent.js 文件
核心代码：
初始化值
动态生成页码函数
上一页
pages.push(
上一页 )
if (totalPage <= 10) {
/*总<a href="/tag/yema/" target="_blank" class="keywords">页码</a>小于等于10时，全部<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>出来*/
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 {
/*总<a href="/tag/yema/" target="_blank" class="keywords">页码</a>大于10时，部分<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>*/
//第一页
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;
}
//前面省略号(当当前<a href="/tag/yema/" target="_blank" class="keywords">页码</a>比分组的<a href="/tag/yema/" target="_blank" class="keywords">页码</a>大时<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>省略号)
if (currentPage >= groupCount) {
pages.push(<li className="" key={-1}>···</li>)
}
//非第一页和最后一页<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>
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>)
}
//<a href="/tag/xiayiye/" target="_blank" class="keywords">下一页</a>
pages.push(<li className={currentPage === totalPage ? "nomore" : null}
onClick={this.nextPageHandeler.bind(this)}
key={totalPage + 1}><a href="/tag/xiayiye/" target="_blank" class="keywords">下一页</a></li>)
return pages;}
页码点击函数:
= 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)
}
上一页和夏夜点击事件
//下一页事件
nextPageHandeler() {
let {currentPage,totalPage} = this.state
// const {totalPage} = this.props.pageConfig;
if (++currentPage > totalPage) {
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上
)
}
2.父组件
创建 Pagecontainer.js 文件
父组件完整代码
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 (
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}
)}
}
export default Pagecontainer
