react:封装组件

封装

/components/Pagination.tsx
import React from 'react'
import { Pagination } from 'antd'

const PaginationWarp = ({ total, paramsInfo, setParamsInfo }) => {
  return (
    <Pagination
      total={total}
      current={paramsInfo.page}
      showSizeChanger
      showQuickJumper
      defaultPageSize={100}
      onChange={(page, pageSize) => {
        const obj = {
          ...paramsInfo,
          page,
          pageSize,
        }
        setParamsInfo(obj)
      }}
      pageSizeOptions={['100', '50', '20']}
      showTotal={total => `总数 ${total} 条`}
    />
  )
}
export default PaginationWarp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

使用

import PaginationWarp from '@/components/Pagination.tsx'
{total.current && (
          <PaginationWarp
            total={total.current}
            paramsInfo={paramsInfo}
            setParamsInfo={setparamsInfo}
          />
        )}
1
2
3
4
5
6
7
8