在ReactJs中使用Scroll动态分页

import React, { useEffect, useRef } from 'react';

const ScrollPagination = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      const container = containerRef.current;
      if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
        // 到达底部，加载更多数据
        // TODO: 调用加载数据的函数
      }
    };

    const container = containerRef.current;
    container.addEventListener('scroll', handleScroll);

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

  return (
    <div ref={containerRef} style={{ height: '400px', overflow: 'auto' }}>
      {/* 渲染数据 */}
    </div>
  );
};

export default ScrollPagination;