- 此分页组件已发布至NPM，欢迎下载并提意见
上一篇文章实现了一个静态版本的分页组件，没有任何交互。在本篇文章中，我们将一步一步实现动态页码和交互效果。
将页码放在 Props 中
在实际的项目中，总页数都是动态变化的，需要从后端获取，因此我们将总页数放到 Props 中，以动态生成页码。
定义一个名为 config 的 Props，该 Props 是一个对象，在该对象中放入分页相关的变量。
调用该分页组件：
import React,{ Component } from "react";
import Pagination from "../Pagination";
export default class App extends Component{
render(){
return(
<article>
<Pagination config = {{
totalPage:10,
}}></Pagination>
</article>
);
}
}
通过 Props 动态生成页码：
import React,{ Component } from "react";
import style from "./pagination.scss";
export default class Pagination extends Component{
constructor(props){
super(props)
}
create(){
const {
totalPage,
} = this.props.config;
let pages = [];
pages.push(<li key={0}>上一页</li>)
for(let i = 1;i <= totalPage; i++){
pages.push(<li key={i}>{i}</li>)
}
pages.push(<li key={totalPage + 1}>下一页</li>)
return pages;
}
render(){
const Pages = this.create.bind(this)();
return(
<div className = { style.main }>
<ul className = { style.page }>
{ Pages }
</ul>
</div>
);
}
}
上面的 create 方法用来动态生成分页，该方法返回一个 JSX 列表。
使用 Props 动态生成页码的效果如图：
动态生成页码.png
使页码可点击
现在我们来实现点击页码，给当前的 li 元素添加样式。思路：
- state 中放一个属性，表示当前页面
- 每次点击页码时，更新该 state
- 若页码数字和该 state 相等，即应用 active 样式
下面是实现代码：
import React,{ Component } from "react";
import style from "./pagination.scss";
export default class Pagination extends Component{
constructor(props){
super(props)
// 设置当前页码，默认为第一页
this.state = {
pageCurr:1,
}
}
create(){
const {
totalPage,
} = this.props.config;
const {
pageCurr,
} = this.state;
let pages = [];
pages.push(<li key={0}>上一页</li>)
for(let i = 1;i <= totalPage; i++){
// 点击页码时调用 go 方法，根据 state 判断是否应用 active 样式
pages.push(<li onClick = { this.go.bind(this,i) } className = { pageCurr === i ? style.active : "" } key={i}>{i}</li>)
}
pages.push(<li key={totalPage + 1}>下一页</li>)
return pages;
}
// 更新 state
go(pageCurr){
this.setState({
pageCurr
})
}
render(){
const Pages = this.create.bind(this)();
return(
<div className = { style.main }>
<ul className = { style.page }>
{ Pages }
</ul>
</div>
);
}
}
实现效果如图：
根据state响应点击.gif
go 方法是该组件的核心方法，用来更新 state，响应操作。
响应上一页和下一页操作
在进行上一页和下一页操作时，核心原理依然不变：通过改变 state，动态应用样式。我们再定义两个方法：
- goPrev 控制页面向前
- goNext 控制页面向后
进一步完善代码：
create(){
...
let pages = [];
pages.push(<li onClick = { this.goPrev.bind(this) } key={0}>上一页</li>)
...
pages.push(<li onClick = { this.goNext.bind(this) } key={totalPage + 1}>下一页</li>)
return pages;
}
...
// 页面向前
goPrev(){
let {
pageCurr,
} = this.state;
this.go( --pageCurr )
}
// 页面向后
goNext(){
let {
pageCurr,
} = this.state;
this.go( ++pageCurr )
}
...
这步完成后，我们的分页组件已经初具雏形了，下面是实现效果：
上下页切换.gif
至此，我们已经由静态组件逐步过渡到了可动态生成页码、能对用户操作进行响应的动态组件。本文到这里也就结束了，后面的文章中，将在此基上实现更多的功能。敬请期待：）
完。
一步一步教你写 React 分页组件（一）
一步一步教你写 React 分页组件（二）
一步一步教你写 React 分页组件（三）
一步一步教你写 React 分页组件（四）
一步一步教你写 React 分页组件（五）
一步一步教你写 React 分页组件（六）
