在返回語句中使用內聯JSX渲染時，檢索元素的寬度

Question

我有一個元素，我想計算它的寬度，然後迭代多少次，以至少佔滿視口的寬度。

問題是，我無法透過我正在使用的行內JSX渲染樣式來取得寬度。即使我將其設為依賴項，我在useEffect中仍然會得到refWidth為空的錯誤。

有沒有一種方法可以在不先將元素加入return語句中、取得其寬度，然後附加所需數量的元素的情況下進行計算和正確渲染？

CodeSandbox連結在這裡

Answer 1

要在內嵌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確保在元素渲染後進行寬度計算，從而得到更準確的結果。