在返回語句中使用內聯JSX渲染時,檢索元素的寬度
P粉441076405
P粉441076405 2023-09-20 22:00:52
0
1
709

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

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

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

CodeSandbox連結在這裡

P粉441076405
P粉441076405

全部回覆(1)
P粉317679342

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板