Impossible de transmettre la valeur de la propriété du composant ReactJS à un autre composant

Question

Comment obtenir la dernière valeur mise à jour de l'objet dimensions dans le composant Navbar.js dans le composant Home.js ? J'ai essayé de transmettre une fonction de rappel en tant qu'accessoires de Home.js à Navbar.js (puisque Home.js est le composant parent de Navbar.js), mais je ne peux pas stocker la valeur d'état des dimensions récemment mise à jour dans Navbar.js. Si je passe l'état des dimensions en tant que dépendance de useEffect, cela provoque une boucle infinie. S'il vous plaît aidez-moi.

**Composant Home.js**

const Accueil = () =>
  const [heightNav, setHeightNav] = useState(0);
  useEffect(() => {
    console.log(hauteurNav);
  }, [hauteurNav]);
  retour (
    

      
          setHeightNav(() => h);
        }}
      />
    
  );
} ;

**Composant Navbar.js**

const Navbar = ({ setHeight }) =>
  const refContainer = useRef();
  const [dimensions, setDimensions] = useState({ width : 0, height : 0 });
  useEffect(() => {
    si (refContainer.current) {
      setDimensions(() => {
        retour {
          largeur : refContainer.current.offsetWidth,
          hauteur : refContainer.current.offsetHeight,
        } ;
      });
      setHeight(dimensions.hauteur);
    }
  }, []);
  retour (
    
    
  );
};            

Answer 1

Essayez cette barre de navigation :

import React, { useEffect, useState, useRef } from 'react';

const Navbar = ({ setHeight }) => {
  const refContainer = useRef();
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const updateDimensions = () => {
      if (refContainer.current) {
        setDimensions({
          width: refContainer.current.offsetWidth,
          height: refContainer.current.offsetHeight,
        });
      }
    };

    updateDimensions();
    window.addEventListener('resize', updateDimensions);

    return () => {
      window.removeEventListener('resize', updateDimensions);
    };
  }, []);

  useEffect(() => {
    setHeight(dimensions.height);
  }, [dimensions.height, setHeight]);

  return <div ref={refContainer}>Navbar Content</div>;
};

export default Navbar;