我有一个元素，我想计算它的宽度，然后迭代多少次，以至少占满视口的宽度。
问题是，我无法通过我正在使用的行内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确保在元素渲染后进行宽度计算，从而得到更准确的结果。