Rumah  >  Soal Jawab  >  teks badan

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

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

P粉441076405P粉441076405417 hari yang lalu694

membalas semua(1)saya akan balas

  • P粉317679342

    P粉3176793422023-09-21 19:17:46

    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.

    balas
    0
  • Batalbalas