React分页功能
话不多说直接上代码(示例):
import React,{ Fragment, Component} from'react';
class RightTwo extends Component{constructor(props){super(props)
this.state={// 当前渲染的页面数据
shenchalist:[{ name:"2019-284", room:"留置室59", day:4},{ name:"2019-285", room:"留置室58", day:2},{ name:"2019-286", room:"留置室49", day:0},{ name:"2019-287", room:"留置室39", day:4},{ name:"2019-288", room:"留置室29", day:5},{ name:"2019-289", room:"留置室19", day:8},{ name:"2019-290", room:"留置室69", day:4},{ name:"2019-291", room:"留置室79", day:3},{ name:"2019-292", room:"留置室89", day:1},{ name:"2019-293", room:"留置室99", day:0},{ name:"2019-294", room:"留置室55", day:8},{ name:"2019-295", room:"留置室54", day:7},{ name:"2019-296", room:"留置室53", day:9},{ name:"2019-297", room:"留置室55", day:6},{ name:"2019-296", room:"留置室53", day:9},{ name:"2019-297", room:"留置室55", day:6},{ name:"2019-296", room:"留置室53", day:9},{ name:"2019-297", room:"留置室55", day:6},{ name:"2019-297", room:"留置室55", day:6},{ name:"2019-296", room:"留置室53", day:9},{ name:"2019-297", room:"留置室55", day:6},{ name:"2019-297", room:"留置室55", day:6},{ name:"2019-296", room:"留置室53", day:9},{ name:"2019-297", room:"留置室55", day:6},],// 当前页码
fyzs:1,// 要去的条数index
fynum:0,// 每条显示的条数
shenchafynum:10}}componentDidMount(){const shenchalist= this.state.shenchalistconst shenchafynum= this.state.shenchafynum// 设置总共页数
this.setState({
fyzs: Math.ceil(shenchalist.length/ shenchafynum)})}
btnFenye=(num)=>{
this.setState({
fynum: num})}// 上一页
btnUp=()=>{const fynum= this.state.fynumif(fynum>0){
this.setState({
fynum: fynum-1})}}// 下一页
btnDown=()=>{const fynum= this.state.fynumconst fyzs= this.state.fyzsif(fynum< fyzs-1){
this.setState({
fynum: fynum+1})}}render(){const{ baojinglist, shenchalist, fyzs, shenchafynum, fynum}= this.state
let str=[]for(let i=0; i< fyzs; i++){
str.push(<span className={i=== fynum?"active":"att"} onClick={()=> this.btnFenye(i)}>{i+1}</span>)}return(<Fragment><div className="rliuzhi"><div className="neirong"><div className="biaoti"><p>审查对象</p><p>审查室</p><p>留置时间</p></div><ul>{shenchalist.slice(fynum* shenchafynum,(fynum+1)* shenchafynum).map((item, index)=>{return(<li key={index}><p>{item.name}</p><p>{item.room}</p><p>{item.day}天</p></li>)})}</ul><div className="fenye"><span className="att" onClick={()=> this.btnUp()}>{"<"}</span>{str}<span className="att" onClick={()=> this.btnDown()}>{">"}</span></div></div></div></Fragment>)}}
exportdefault RightTwo;
示例图如下