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'}}><Paginationtotal={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>)
}