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

Question

我在 ReactJs 中有一个功能组件，想向我的页面添加分页，以便当用户到达屏幕末尾时，我将从 Api 获取其余数据。我的代码如下所示：

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

我如何确定何时使用滚动到页面末尾来触发 Api 请求。（如果可能，请提供功能组件示例，而不是 class 示例）谢谢

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>

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

ReactJs Functional Component Get When Scroll Reached End

javascript

pagination

functional-programming

reactjs

react-functional-component