Rumah > Soal Jawab > teks badan
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粉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.