Abrufen der Breite eines Elements bei Verwendung von Inline-JSX-Rendering in einer Return-Anweisung

Question

Ich habe ein Element und möchte seine Breite berechnen und dann iterieren, wie oft es dauert, mindestens die Breite des Ansichtsfensters auszufüllen.

Das Problem ist, dass ich die Breite nicht über den von mir verwendeten Inline-JSX-Renderstil ermitteln kann. Selbst wenn ich es als Abhängigkeit festlege, erhalte ich in useEffect immer noch die Fehlermeldung „refWidth is empty“.

Gibt es eine Möglichkeit, korrekt zu berechnen und zu rendern, ohne zuerst das Element zur Return-Anweisung hinzuzufügen, seine Breite zu ermitteln und dann die erforderliche Anzahl von Elementen anzuhängen?

CodeSandbox-Link hier

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确保在元素渲染后进行宽度计算，从而得到更准确的结果。