Mendapatkan semula lebar elemen apabila menggunakan pemaparan JSX sebaris dalam penyata pulangan

Question

Saya mempunyai elemen dan saya ingin mengira lebarnya dan kemudian ulangi berapa kali masa yang diperlukan untuk sekurang-kurangnya mengisi lebar ruang pandang.

Masalahnya, saya tidak boleh mendapatkan lebar melalui gaya pemaparan JSX sebaris yang saya gunakan. Walaupun saya menetapkannya sebagai kebergantungan, saya masih mendapat ralat kosong refWidth dalam useEffect.

Adakah terdapat cara untuk mengira dan menghasilkan dengan betul tanpa terlebih dahulu menambahkan elemen pada pernyataan pulangan, mendapatkan lebarnya, dan kemudian menambahkan bilangan elemen yang diperlukan?

Pautan CodeSandbox di sini

Answer 1

Untuk mengakses lebar elemen dalam pemaparan JSX sebaris, anda boleh menggunakan cangkuk useLayoutEffect.

import { useLayoutEffect, useRef, useState } from "react";

export default function App() {
  const windowWidth = 1920;
  const ref = useRef(null);
  const [numberOfItems, setNumberOfItems] = useState(0);

  useLayoutEffect(() => {
    ref.current && setNumberOfItems(Math.ceil(windowWidth / ref.current.clientWidth));
  }, [windowWidth]);

  return (
    <div className="App">
      <h2 ref={ref}>hello</h2>
      {Array.from({ length: numberOfItems }, (_, i) => (
        <h2 key={i}>
          hello
        </h2>
      ))}
    </div>
  );
}

useLayoutEffect cangkuk memastikan pengiraan lebar dilakukan selepas elemen dipaparkan, menghasilkan keputusan yang lebih tepat.