如何在react原生的滚动视图中延迟加载特定数量的项目？

import React, { useState } from 'react';

function ScrollableList() {
  const [loadedItems, setLoadedItems] = useState(0);
  const [delayedItems, setDelayedItems] = useState(10); // 延迟加载的项目数量

  // 加载更多项目的函数
  const loadMoreItems = () => {
    setLoadedItems(prevLoadedItems => prevLoadedItems + 10); // 每次加载10个项目
  };

  // 模拟滚动事件，当滚动到底部时触发加载更多项目
  const handleScroll = () => {
    const scrollableElement = document.getElementById('scrollable-element');
    if (
      scrollableElement.scrollTop + scrollableElement.clientHeight >=
      scrollableElement.scrollHeight
    ) {
      loadMoreItems();
    }
  };

  return (
    <div
      id="scrollable-element"
      style={{ height: '400px', overflowY: 'scroll' }}
      onScroll={handleScroll}
    >
      {/* 渲染已加载的项目 */}
      {Array.from({ length: loadedItems }).map((_, index) => (
        <div key={index}>项目 {index + 1}</div>
      ))}
    </div>
  );
}

export default ScrollableList;