Reactで無限スクロールを実装する

コーディングを開始する前に、ページネーションとは何か、またページネーションが必要な理由について詳しく知りたい場合は、ここで私のブログをチェックしてください。

画面に 50 個の項目を表示し、ユーザーが一番下に到達するたびに次の 50 個の項目をロードするという要求があるとします。
そのためには、スクロール位置を追跡し、ドキュメント本文の offsetHeight と比較し続ける必要があります。

スクロール位置を取得するには、window.scrollYを使用します。
基本的に、window.scrollY は、ページが上から垂直にスクロールされたピクセル数を示します。ユーザーがページをどのくらい下までスクロールしたかを示します。
window.scrollY とともに、さらに 2 つの値を使用して、ユーザーがページの下部に到達したかどうかを確認します。
window.innerHeight: これは、ウィンドウの表示部分 (ビューポート) の高さを表します。これは、ユーザーが現在ブラウザーでスクロールせずに表示できる領域の高さです。

document.body.offsetHeight: body 要素の合計の高さを示します。

コード:

import { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
  let query = [];
  let [items, setitems] = useState(50);
  for (let i = 1; i <= items; i++) {
    query.push(<p>{i}</p>);
  }

  useEffect(() => {
    const onScroll = () => {
      if (
        window.innerHeight + window.scrollY >=
        document.body.offsetHeight - 40
      ) {
        setitems(items + 50);
      }
    };

    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [items]);

  return <div className="App">{query.map((q) => q)}</div>;
}

説明: ページの最初のレンダリングは、スクロール イベントを追加する useEffect フックをトリガーします。スクロール イベントが発生するたびに、onScroll() メソッドが呼び出され、スクロールの位置がチェックされます。下位 40 の場合は、さらに 50 個のアイテムがアイテムの状態に追加されます。

以上がReactで無限スクロールを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。