我有一個元素，我想計算它的寬度，然後迭代多少次，以至少佔滿視口的寬度。
問題是，我無法透過我正在使用的行內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。
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> ); }useLayoutEffecthook確保在元素渲染後進行寬度計算，從而得到更準確的結果。