一、why?

有时候咱们需求 Select 组件中数据比较大，或许需求分页的问题，由于 antd 中并没有直接供应 Select 分页功用，咱们需求自己写。或许也有许多其他的方案，就是滚动到底部加载，其实这种仍是没有分页来的直接，分页的效果与表格类似。

二、需求的组件

  • Select 组件
  • Pagination 组件

这儿的 Select 有两种用法，一种是 option 的数组像的办法，一种是 Option 烘托组件的办法。

三、组件规划

  • Option 运用组件的 memo 进行缓存，避免重复烘托。
  • type 规划为两个首要组件服务，和外部的数据获取，当然也能够内部完结 ajax 请求在组件内部完结数据获取。
  • 运用 dropdownRender 烘托 Select 和 Pagination 两个部分。

四、手动完结

import { Select, Pagination } from "antd";
import { memo, useMemo, useState } from "react";
function OptionComImpl({ data }: any) {
  return (
    <div>
      {data.map((item: any, index: number) => {
        return <Select.Option value={item.value} key={index}>{item.label}</Select.Option>;
      })}
    </div>
  );
}
const OptionCom = memo(OptionComImpl);
type ISelectPaginationProps = {
  data: any[]
  currentPage: number
  selectStyles: React.CSSProperties
  paginationStyles: React.CSSProperties
  paginationProps: any
  selectPagniationProps: any
}
const _data = [
    { label: "选项 1", value: "1" },
    { label: "选项 2", value: "2" },
    { label: "选项 3", value: "3" },
    { label: "选项 4", value: "4" },
    { label: "选项 5", value: "5" },
    { label: "选项 6", value: "6" },
    { label: "选项 7", value: "7" },
    { label: "选项 8", value: "8" },
    { label: "选项 9", value: "9" },
    { label: "选项 10", value: "10" },
    { label: "选项 11", value: "11" },
    { label: "选项 12", value: "12" },
    { label: "选项 13", value: "13" },
    { label: "选项 14", value: "14" },
    { label: "选项 15", value: "15" },
    { label: "选项 16", value: "16" },
    { label: "选项 17", value: "17" },
    { label: "选项 18", value: "18" },
    { label: "选项 19", value: "19" },
    { label: "选项 20", value: "20" },
    { label: "选项 21", value: "21" },
    { label: "选项 22", value: "22" },
  ];
export default function SelectPagination({ data = _data, ...props }: ISelectPaginationProps) {
  const [currentPage, setCurrentPage] = useState( props.currentPage || 1); // 当时页码
  const [skip] = useState(10);
  const dataSource = useMemo(() => {
    return data.slice(
      skip * (currentPage - 1),
      data.length - currentPage * skip > 0 ? currentPage * skip : data.length
    );
  }, [currentPage, data, skip]);
  return (
    <div>
      <Select
        style={{
          width: 200,
          ...props.selectStyles,
        }}
        dropdownRender={(menu, ...args) => {
          return (
            <div>
              {menu}
              <div style={{ padding: '10px 0px'}}>
                <Pagination
                  total={data.length}
                  showSizeChanger
                  size="small"
                  pageSize={skip}
                  onChange={(page) => {
                    setCurrentPage(page);
                  }}
                  {...props.paginationProps}
                />
              </div>
            </div>
          );
        }}
        {...props.selectPagniationProps}
      >
        {dataSource.map((item) => {
          return <OptionCom key={item.value} data={data} />;
        })}
      </Select>
    </div>
  );
}

五、剖析

核心要知晓的点就是 dropdownRender 特点，烘托额定的内容。其间 menu 特点是不好修改的。一起咱们需求核算初始分页数据 dataSource 当然也能够依据自己的需求重新完结，所以运用组件式的分页烘托数据。运用 useMemo 核算并缓存核算结果。本示例只是一个简略的示例。

六、示例

remix-antd-extra 示例库房

remix-antd-extra 部署

七、小结

Select 与 Pagination 组件是一个常用的功用，由于或许 Select 中需求寄存的数据比较大，运用滚动的办法也有需求滚动好久，运用分页的办法更加的合理。本文首要评论的其间一个通用的完结办法，期望能够协助到我们。