如何用React实现一个无限滚动的列表组件

发布时间：2024-05-10 14:47:15 作者：小樊
来源：亿速云阅读：245

实现一个无限滚动的列表组件可以使用React和一些第三方库来帮助处理滚动和数据加载。下面是一个简单的示例，演示如何在React中实现一个无限滚动的列表组件：

首先，安装React和一些必要的依赖库：

npm install react react-dom axios

创建一个名为InfiniteList的组件，并在该组件中加载数据并实现无限滚动功能：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const InfiniteList = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`);
      setData([...data, ...response.data]);
    };

    fetchData();
  }, [page]);

  const handleScroll = () => {
    if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight) return;

    setPage(page + 1);
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [handleScroll]);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
};

export default InfiniteList;

在这个示例中，我们使用useState来存储数据和当前页面号，并使用useEffect来加载数据和监听页面滚动事件。当页面滚动到底部时，会自动加载下一页的数据。

在应用程序的入口文件中使用InfiniteList组件：

import React from 'react';
import ReactDOM from 'react-dom';
import InfiniteList from './InfiniteList';

const App = () => {
  return (
    <div>
      <h1>Infinite Scroll List</h1>
      <InfiniteList />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

最后，在HTML文件中添加一个具有id为root的div元素，用于渲染React应用程序：

<!DOCTYPE html>
<html>
<head>
  <title>Infinite Scroll List</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

现在，您已经实现了一个简单的无限滚动列表组件。您可以根据自己的需求对其进行定制和扩展。

如何用React实现一个无限滚动的列表组件

相关阅读