react基于antd二次封装分页组件Pagination

react基于antd二次封装分页组件Pagination

组件PaginationCom

import {
    Pagination } from 'antd';
import propTypes from "prop-types";
import React from 'react';

const PaginationCom = (props) => {
   
    return (
        <div className='content' style={
   {
   marginTop: '20px'}}>
          <Pagination
              total={
   props.total}
              showSizeChanger={
   props.showSizeChanger}
              showQuickJumper={
   props.showQuickJumper}
              pageSizeOptions={
   props.pageSizeOptions}
              current={
   props.current}
              pageSize={
   props.pageSize}
              showTotal={
   (total) => `共 ${
     total} 条`}
              onChange={
   props.onChange}
              onShowSizeChange={
   props.onShowSizeChange}
            />
        </div>
    )
}
// props
PaginationCom.propTypes = {
   
  current: propTypes.number.isRequired, // 当前页数
  pageSize: propTypes.number.isRequired,// 每页条数
  total: propTypes.number.isRequired,// 总数
  onChange: propTypes.func.isRequired, // 页码切换
  onShowSizeChange: propTypes.func.isRequired, // 条数切换
  showSizeChanger: propTypes.bool, // 是否展示 pageSize 切换器
  showQuickJumper: propTypes.bool, // 是否可以快速跳转至某页
  pageSizeOptions: propTypes.array,
  size: propTypes.string,
};
// 默认值
PaginationCom.defaultProps = {
   
  current: 1, // 当前页数
  pageSize: 10, // 每页条数
  total: 0, // 默认值
  showSizeChanger: true, // 是否展示 pageSize 切换器
  showQuickJumper: true, // 是否可以快速跳转至某页
  pageSizeOptions: [10,20,50],
};
export default PaginationCom

使用组件

import React, {
    useState } from 'react';
import PaginationCom from "./PaginationCom";
export default function App(props) {
   
  const [page,setPage] = useState(1)
  const [pageSize,setPageSize] = useState(10)
  const pageChange = (page) => {
   
    console.log('pageChange', page);
    setPage(page)
  }
  const pageSizeChange = (page, pageSize) => {
   
    // console.log('pageSizeChange',page,"pageSize",pageSize);
    setPageSize(pageSize)
    // setPage(1) // 没有效果
  }
    return (
        <div className='content'>
          page - {
   page}
          <PaginationCom  total={
   35} current={
   page} pageSize={
   pageSize} onChange={
   pageChange} onShowSizeChange={
   pageSizeChange}></PaginationCom>
        </div>
    )
}