react 原生分页封装

//模拟数据
const [list, setList] = useState([
    { id: 1, name: '里斯', age: 18 },
    { id: 2, name: '张三', age: 28 },
    { id: 3, name: '小飞3', age: 48 },
    { id: 4, name: '小飞4', age: 48 },
    { id: 5, name: '小飞5', age: 48 },
    { id: 6, name: '小飞6', age: 48 },
    { id: 7, name: '小飞7', age: 48 },
    { id: 8, name: '小飞8', age: 48 },
    { id: 9, name: '小飞9', age: 48 },
    { id: 10, name: '小飞10', age: 48 },
    { id: 11, name: '小飞11', age: 48 },
    { id: 12, name: '小飞12', age: 48 },
    { id: 13, name: '小飞13', age: 48 },
    { id: 14, name: '小飞14', age: 48 },
    { id: 15, name: '小飞15', age: 48 },
    { id: 16, name: '小飞16', age: 48 },
    { id: 17, name: '小飞17', age: 48 },
    { id: 18, name: '小飞18', age: 48 },
    { id: 19, name: '小飞19', age: 48 },
    { id: 20, name: '小飞20', age: 48 },
  ])
  //总数据数量
  const [totle, setTotle] = useState(list.length)



//引入表格和分页组件
	<MyTable {...myProps}></MyTable>
    <Paging {...myProps}></Paging>

//分页组件
import React, { useEffect, useMemo, useState } from 'react'
import './paging.css'
import { eventBus } from '../../utils/eventBus'
export default function Paging(props) {
    const { totle, setChildPage } = props
    const [page, setPage] = useState(setChildPage) //每页多少条
    let [nowChoos, setNowChoos] = useState(1) //当前页


    const myPage = useMemo(() => {
        return Math.ceil(totle / page)
    }, [totle, page]) //计算有多少页

    

    const getArr = (number) => {
        const arr = []
        for (let i = 1; i <= number; i++) {
            arr.push(i)
        }
        return arr
    }


    const goPage = (num) => {
        setNowChoos(num)
    }
    const changePage = (number) => {
        setNowChoos(nowChoos += number)
    }
    useEffect(() => {
        eventBus.emit('goPage', nowChoos)
    }, [nowChoos])
    return (
        <div>
            {myPage}
            <div style={{ display: 'flex' }}>
                <button onClick={() => changePage(-1)} disabled={nowChoos === 1 ? true : false}>上一页</button>
                <div style={{ display: 'flex' }}>
                    {
                        getArr(myPage).map((item, index) => {
                            return <div onClick={() => goPage(item)} className={nowChoos === item ? 'active' : ''} style={{ marginLeft: '5px', marginRight: '5px', backgroundColor: 'orange', width: 30, textAlign: 'center' }} key={index}>{item}</div>
                        })
                    }
                </div>
                <button onClick={() => changePage(1)} disabled={nowChoos === myPage ? true : false}>下一页</button>
            </div>
        </div>
    )
}

//表格组件
import React, { useEffect, useMemo, useState } from 'react'
import { eventBus } from '../../utils/eventBus'
export default function Table(props) {
    const { list, totle, setChildPage } = props
    const [nowPage, setNowPage] = useState(0)
    const [num, setNum] = useState(0)
    const newList = (list) => {
        let arr = []
        for (let i = (nowPage - 1) * setChildPage; i < setChildPage * (nowPage); i++) {
            if(list[i]){
                arr.push(list[i])
            }
        } 
        return arr
    }
    useEffect(() => {
        eventBus.addListener('goPage', (page) => {
            setNowPage(page)
        })
        setNum(c => c + 1)
    }, [nowPage])
    return (
        <div>
            {
                newList(list).map(item => {
                    return <div key={item.id}>{item.name}-{item.age}</div>
                })
            }
        </div>
    )
}