recherche

Maison  >  Questions et réponses  >  le corps du texte

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

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

P粉441076405P粉441076405509 Il y a quelques jours785

répondre à tous(1)je répondrai

  • P粉317679342

    P粉3176793422023-09-21 19:17:46

    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.

    répondre
    0
  • Annulerrépondre