在返回语句中使用内联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确保在元素渲染后进行宽度计算，从而得到更准确的结果。