ReactJs的功能组件在滚动结束时获取

Question

ReactJs中有一个功能组件，我想在页面中添加分页，这样当用户到达屏幕末尾时，我就可以从Api获得其余数据。我的代码如下：

<div
className="MyOrdersHistory-list-container">
{ordersList.map((order, index) => (
<div key={index} className="MyOrdersHistory-listItem-container">
........
</div>
))}
</div>

我该如何计算何时使用滚动到页面末尾来触发Api请求。(如果可能的话，请给出一个功能组件的例子，而不是一类(感谢

Answer 1

import React, { useRef, useEffect } from 'react';
const <YourComponent> = () => {
const list = useRef();
const onScroll = () => {
if (list.current) {
const { scrollTop, scrollHeight, clientHeight } = list.current;
if (scrollTop + clientHeight === scrollHeight) {
// DO SOMETHING WHAT YOU WANT
}
}
};
...
<div
onScroll={() => onScroll()} ref={list}
className="MyOrdersHistory-list-container">
{ordersList.map((order, index) => (
<div key={index} className="MyOrdersHistory-listItem-container">
........
</div>
))}
</div>