React+Antd 翻页控件

import React from 'react';
import { Pagination } from 'shineout';
import { Button } from 'antd';

 export const paginationComponent = (pageNum, pageSize, setPageNum, setPageSize, className, totalSize ) => {
    const jump = () => {
      let dom = document.querySelector(`${className}-Pagination .so-input input`)
      let value = Number(dom.getAttribute('value'));
      if (value > Math.ceil(totalSize / pageNum)) {
        value = Math.ceil(totalSize / pageNum);
      }
      setPageNum(value);
    }
    return <Pagination
      current={pageNum}
      pageSize={pageSize}
      pageSizeList={[10, 20, 30, 40]}
      className={`${className}_Pagination`}
      total={totalSize}
      text={{
        jumper: `到第 {input} 页`,
      }}
      onChange={(...args) => {
        setPageNum(args[0]);
        setPageSize(args[1]);
      }}
      layout={[
        ({ }) => `共有 ${totalSize}条 ，每页显示`,
        'list',
        ({ }) => `条`,
        'links',
        ({ }) => <span ><span style={{ color: '#0070CC' }}>{pageNum}</span>/ {Math.ceil((totalSize && totalSize) / (pageSize && pageSize))}</span>,
        'jumper',
        ({ }) => <Button onClick={jump}>确定</Button>,
      ]}
      align='right'
    />
};