基于antd react实现分页加载的拉下选择器

以下是一个使用Ant Design的Select组件和Pagination组件实现分页加载的下拉选择器的简单示例代码：

import React, { useState, useEffect } from 'react';
import { Select, Pagination } from 'antd';
import reqwest from 'reqwest';
 
const SelectWithPagination = ({ pageSize = 10 }) => {
  const [options, setOptions] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [total, setTotal] = useState(0);
 
  useEffect(() => {
    setIsLoading(true);
    reqwest({
      url: `https://randomuser.me/api/?results=${pageSize}&page=${currentPage}`,
      type: 'json',
    }).then(data => {
      setOptions(data.results.map(user => ({
        label: `${user.name.first} ${user.name.last}`,
        value: user.login.username,
      })));
      setTotal(data.info.results);
      setIsLoading(false);
    });
  }, [currentPage, pageSize]);
 
  const onPageChange = page => {
    setCurrentPage(page);
  };
 
  return (
    <>
      <Select
        mode="multiple"
        placeholder="Select users"
        notFoundContent={isLoading ? 'Loading...' : 'No more users'}
        options={options}
      />
      <Pagination
        style={{ marginTop: 16 }}
        current={currentPage}
        onChange={onPageChange}
        total={total * pageSize}
      />
    </>
  );
};
 
export default SelectWithPagination;

在这个例子中，我们使用了reqwest库来从https://randomuser.me/获取随机用户的数据。Select组件的options通过状态管理进行更新，当用户滚动分页组件时，我们通过useEffect钩子更新当前页面，并加载新的数据。

请注意，您需要在您的项目中安装antd库和reqwest库。您可以使用npm或yarn来安装它们：

npm install antd reqwest
# 或者
yarn add antd reqwest

然后您可以在React组件中导入并使用SelectWithPagination组件。