84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
我有一個元素,我想計算它的寬度,然後迭代多少次,以至少佔滿視口的寬度。
問題是,我無法透過我正在使用的行內JSX渲染樣式來取得寬度。即使我將其設為依賴項,我在useEffect中仍然會得到refWidth為空的錯誤。
有沒有一種方法可以在不先將元素加入return語句中、取得其寬度,然後附加所需數量的元素的情況下進行計算和正確渲染?
CodeSandbox連結在這裡
要在內嵌JSX渲染中存取元素的寬度,可以使用useLayoutEffect hook。
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 hook確保在元素渲染後進行寬度計算,從而得到更準確的結果。
useLayoutEffect
要在內嵌JSX渲染中存取元素的寬度,可以使用useLayoutEffect hook。
useLayoutEffect
hook確保在元素渲染後進行寬度計算,從而得到更準確的結果。