recherche

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

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

<p>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. </p> <pre class="brush:php;toolbar:false;">**Composant Home.js** const Accueil = () => const [heightNav, setHeightNav] = useState(0); useEffect(() => { console.log(hauteurNav); }, [hauteurNav]); retour ( <div> <Barre de navigation setHeight={(h) => setHeightNav(() => h); }} /> </div> ); } ; **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 ( <Conteneur ref={refContainer}> </Conteneur> ); };</pré>
P粉647504283P粉647504283466 Il y a quelques jours544

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

  • P粉420958692

    P粉4209586922023-08-16 22:15:16

    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;

    répondre
    0
  • Annulerrépondre