react实现Dom元素滚动到底部分页加载数据，渲染列表

在React中，可以通过监听滚动事件来判断元素是否滚动到底部，并在到达底部时加载更多数据。以下是一个简单的例子：

import React, { useState, useEffect, useRef } from 'react';
 
const InfiniteScrollList = ({ items, loadMoreItems }) => {
  const [isLoading, setIsLoading] = useState(false);
  const listRef = useRef(null);
 
  const handleScroll = () => {
    if (!listRef.current) return;
    if (isLoading) return;
 
    const { scrollTop, clientHeight, scrollHeight } = listRef.current;
    if (scrollTop + clientHeight >= scrollHeight) {
      setIsLoading(true);
      loadMoreItems();
    }
  };
 
  useEffect(() => {
    const node = listRef.current;
    node.addEventListener('scroll', handleScroll);
    return () => node.removeEventListener('scroll', handleScroll);
  }, []);
 
  return (
    <div ref={listRef} style={{ height: '300px', overflowY: 'auto' }}>
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
      {isLoading && <div>Loading...</div>}
    </div>
  );
};
 
export default InfiniteScrollList;

使用此组件时，你需要提供items作为数据列表，以及loadMoreItems函数来加载更多数据。当列表滚动到底部时，loadMoreItems会被调用，并且会显示“Loading...”状态，直到加载完毕。