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>
    )
}