轻松搞定！使用 Antd 构建下拉懒加载组件

2023-02-16 20:18:52

React 中下拉懒加载组件的详尽指南

需求分析

现代网络应用程序要求能够高效且动态地加载数据。下拉懒加载组件允许用户在下拉菜单中加载更多数据，从而提高用户体验和性能。

组件实现

1. 安装依赖

使用 create-react-app 创建一个新的 React 项目并安装 Antd：

npx create-react-app antd-select-lazy-load
npm install antd

2. 编写组件

创建组件文件 AntdSelectLazyLoad.js：

import React, { useState } from "react";
import { Select } from "antd";

const AntdSelectLazyLoad = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  const handleLoadMore = () => {
    setLoading(true);
    setTimeout(() => {
      setData([...data, ...newData]);
      setLoading(false);
    }, 1000);
  };

  const options = data.map((item) => ({
    value: item.value,
    label: item.label,
  }));

  return (
    <Select
      showSearch
      style={{ width: 200 }}
      options={options}
      loading={loading}
      onDropdownVisibleChange={handleLoadMore}
    />
  );
};

export default AntdSelectLazyLoad;

3. 使用组件

在你的 React 项目中导入并使用组件：

import AntdSelectLazyLoad from "./AntdSelectLazyLoad";

const App = () => {
  return (
    <div>
      <AntdSelectLazyLoad />
    </div>
  );
};

export default App;