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 ( ); };
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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]); returnNavbar Content ; }; export default Navbar;