react-antd的分页 如何 自定义分页下拉框

在React-antd中，`Pagination`组件自带了默认的分页样式和功能，包括下拉框。如果你想要自定义分页下拉框，你可以通过以下几个步骤操作：

1. **替换组件**: 首先，你需要从`Pagination`组件中移除它的`Dropdown`部分。这通常可以通过不传递`onChange`和`onchangeExtra`等事件属性来实现，因为它们控制着分页下拉框的行为。

import { Pagination } from 'antd';
const CustomPagination = ({ total, onChange }) => {
  return (
    <Pagination
      total={total}
      pageSizeOptions={['10', '20', '30', '40']}
      current={1}
      showSizeChanger={false} // 关闭默认的下拉框
      onChange={onChange} // 保留更改当前页码的回调
    />
  );
};

2. **手动添加下拉框**: 如果你还是想让用户可以选择页面大小，可以自己创建一个可交互的元素，并绑定`onChange`事件。例如，可以使用`Select`组件或其他选择器组件。

import Select from 'antd/lib/select';

// ...

const paginationDropdown = (
  <div>
    <label>每页显示:</label>
    <Select
      options={['10', '20', '30', '40']}
      value={pageSizeOption}
      onChange={(value) => onChange({ pageSize: parseInt(value), current: 1 })}
    />
  </div>
);

3. **合并组件**: 将自定义的分页按钮和选择器组合在一起，并将`onChange`函数作为两者共同的更新策略。

const CustomPaginationWithDropdown = (props) => {
  const [pageSizeOption, setPageSizeOption] = React.useState('10');
  
  const handleChange = (params) => {
    setPageSizeOption(params.pageSize);
    onChange(params);
  };

  return (
    <>
      {paginationDropdown}
      <CustomPagination total={props.total} onChange={handleChange} />
    </>
  );
};

**相关问题--:**
1. 我们如何处理用户在分页下拉框中选择不同的页面大小时的事件？
2. 是否可以直接覆盖`Pagination`的CSS来自定义外观，而不是完全替换它？
3. 如何在`CustomPaginationWithDropdown`组件中保持状态一致性，如总页数的变化会自动更新分页下拉选项？