react分页功能

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.shenchalist
        const shenchafynum = this.state.shenchafynum
        // 设置总共页数
        this.setState({
            fyzs: Math.ceil(shenchalist.length / shenchafynum)
        })
    }
    btnFenye = (num) => {
        this.setState({
            fynum: num
        })
    }
    // 上一页
    btnUp = () => {
        const fynum = this.state.fynum
        if (fynum > 0) {
            this.setState({
                fynum: fynum - 1
            })
        }
    }
    // 下一页
    btnDown = () => {
        const fynum = this.state.fynum
        const fyzs = this.state.fyzs
        if (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 >
        )
    }
}


export default RightTwo;

示例图如下