Melaksanakan tatal tak terhingga dalam tindak balas

Sebelum kita memulakan pengekodan, jika anda ingin mengetahui lebih lanjut tentang apa itu penomboran dan mengapa kita memerlukannya, sila layari blog saya di sini.

Katakanlah ask adalah untuk memaparkan 50 item pada skrin dan apabila pengguna sampai ke bahagian bawah, muatkan 50 item seterusnya.
Untuk itu kita perlu menjejaki kedudukan tatal dan terus membandingkannya dengan badan dokumen offsetHeight.

Untuk mendapatkan kedudukan tatal, kami akan menggunakan window.scrollY.
Pada asasnya window.scrollY memberikan bilangan piksel halaman telah ditatal secara menegak dari atas. Ia memberitahu anda sejauh mana ke bawah halaman yang pengguna telah menatal.
Bersama-sama dengan window.scrollY, kami akan menggunakan dua lagi nilai untuk menyemak sama ada pengguna telah sampai di bahagian bawah halaman atau tidak.
window.innerHeight: Ini mewakili ketinggian bahagian tetingkap yang boleh dilihat (port pandang). Ia adalah ketinggian kawasan yang pengguna boleh lihat pada masa ini dalam penyemak imbas tanpa menatal.

document.body.offsetHeight: Ia memberikan jumlah ketinggian elemen badan.

Kod:

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>;
}

Penjelasan: Paparan pertama halaman akan mencetuskan cangkuk useEffect yang akan menambah acara tatal. Setiap kali peristiwa menatal berlaku, kaedah onScroll() akan digunakan dan ia akan menyemak kedudukan skrol. Jika ia berada di bahagian bawah-40, maka lebih 50 item ditambahkan pada keadaan item.

Atas ialah kandungan terperinci Melaksanakan tatal tak terhingga dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!