Infinite Scroll 无限滚动

export function InfiniteScrollBasic() {  const [count, setCount] = useState(0);  const listRef = useRef<HTMLUListElement>(null);  useInfiniteScroll(listRef, {    onLoad: () => setCount((value) => value + 2),  });  return (    <ul ref={listRef} className="infinite-list" style={listStyle}>      {Array.from({ length: count }, (_, index) => (        <li key={index + 1} className="infinite-list-item" style={itemStyle}>          {index + 1}        </li>      ))}    </ul>  );}

export function InfiniteScrollDisableLoading() {  const [count, setCount] = useState(10);  const [loading, setLoading] = useState(false);  const noMore = count >= 20;  const disabled = loading || noMore;  const listRef = useRef<HTMLUListElement>(null);  useInfiniteScroll(listRef, {    disabled,    onLoad: () => {      setLoading(true);      window.setTimeout(() => {        setCount((value) => value + 2);        setLoading(false);      }, 2000);    },  });  return (    <div className="infinite-list-wrapper" style={wrapperStyle}>      <ul ref={listRef} className="list" style={plainListStyle}>        {Array.from({ length: count }, (_, index) => (          <li            key={index + 1}            className="list-item"            style={index > 0 ? { ...dangerItemStyle, marginTop: 10 } : dangerItemStyle}          >            {index + 1}          </li>        ))}      </ul>      {loading && <p>Loading...</p>}      {noMore && <p>No more</p>}    </div>  );}