ReactJs功能组件在滚动到达结束时获取答案

【问题标题】：ReactJs Functional Component Get When Scroll Reached EndReactJs功能组件在滚动到达结束时获取
【发布时间】：2021-04-18 08:26:48
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript reactjs functional-programming pagination react-functional-component

【解决方案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>

【讨论】：