- 此分頁組件已發(fā)布至NPM，歡迎下載并提意見
上一篇文章實(shí)現(xiàn)了一個靜態(tài)版本的分頁組件，沒有任何交互昵骤。在本篇文章中，我們將一步一步實(shí)現(xiàn)動態(tài)頁碼和交互效果肯适。
將頁碼放在 Props 中
在實(shí)際的項(xiàng)目中变秦，總頁數(shù)都是動態(tài)變化的，需要從后端獲取框舔，因此我們將總頁數(shù)放到 Props 中蹦玫，以動態(tài)生成頁碼。
定義一個名為 config 的 Props刘绣，該 Props 是一個對象樱溉，在該對象中放入分頁相關(guān)的變量。
調(diào)用該分頁組件：
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 動態(tài)生成頁碼：
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 方法用來動態(tài)生成分頁纬凤，該方法返回一個 JSX 列表福贞。
使用 Props 動態(tài)生成頁碼的效果如圖：
使頁碼可點(diǎn)擊
現(xiàn)在我們來實(shí)現(xiàn)點(diǎn)擊頁碼，給當(dāng)前的 li 元素添加樣式停士。思路：
- state 中放一個屬性挖帘，表示當(dāng)前頁面
- 每次點(diǎn)擊頁碼時，更新該 state
- 若頁碼數(shù)字和該 state 相等向瓷，即應(yīng)用 active 樣式
下面是實(shí)現(xiàn)代碼：
import React,{ Component } from "react";
import style from "./pagination.scss";
export default class Pagination extends Component{
constructor(props){
super(props)
// 設(shè)置當(dāng)前頁碼肠套，默認(rèn)為第一頁
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++){
// 點(diǎn)擊頁碼時調(diào)用 go 方法，根據(jù) state 判斷是否應(yīng)用 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>
);
}
}
實(shí)現(xiàn)效果如圖：
go 方法是該組件的核心方法猖任，用來更新 state你稚，響應(yīng)操作。
響應(yīng)上一頁和下一頁操作
在進(jìn)行上一頁和下一頁操作時朱躺，核心原理依然不變：通過改變 state刁赖，動態(tài)應(yīng)用樣式。我們再定義兩個方法：
- goPrev 控制頁面向前
- goNext 控制頁面向后
進(jìn)一步完善代碼：
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 )
}
...
這步完成后长搀，我們的分頁組件已經(jīng)初具雛形了宇弛，下面是實(shí)現(xiàn)效果：
至此，我們已經(jīng)由靜態(tài)組件逐步過渡到了可動態(tài)生成頁碼源请、能對用戶操作進(jìn)行響應(yīng)的動態(tài)組件枪芒。本文到這里也就結(jié)束了彻况，后面的文章中，將在此基上實(shí)現(xiàn)更多的功能舅踪。敬請期待：）
完纽甘。
一步一步教你寫 React 分頁組件（一）
一步一步教你寫 React 分頁組件（二）
一步一步教你寫 React 分頁組件（三）
一步一步教你寫 React 分頁組件（四）
一步一步教你寫 React 分頁組件（五）
一步一步教你寫 React 分頁組件（六）
