Récupération de la largeur d'un élément lors de l'utilisation du rendu JSX en ligne dans une instruction return

Question

J'ai un élément et je souhaite calculer sa largeur, puis répéter combien de fois il faut pour remplir au moins la largeur de la fenêtre.

Le problème est que je ne parviens pas à obtenir la largeur via le style de rendu JSX en ligne que j'utilise. Même si je le définis comme dépendance, j'obtiens toujours l'erreur refWidth is empty dans useEffect.

Existe-t-il un moyen de calculer et de restituer correctement sans ajouter d'abord l'élément à l'instruction return, obtenir sa largeur, puis ajouter le nombre d'éléments requis ?

Lien CodeSandbox ici

Answer 1

Pour accéder à la largeur d'un élément dans le rendu JSX en ligne, vous pouvez utiliser le hook useLayoutEffect.

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 garantit que les calculs de largeur sont effectués après le rendu de l'élément, ce qui donne des résultats plus précis.