Der Eigenschaftswert der ReactJS-Komponente kann nicht an eine andere Komponente übergeben werden
P粉647504283
P粉647504283 2023-08-16 00:30:36
0
1
543
<p>Wie erhalte ich den neuesten aktualisierten Wert des Dimensionsobjekts in der Navbar.js-Komponente in der Home.js-Komponente? Ich habe versucht, eine Rückruffunktion als Requisiten von Home.js an Navbar.js zu übergeben (da Home.js die übergeordnete Komponente von Navbar.js ist), aber ich kann den neu aktualisierten Dimensionsstatuswert nicht in Navbar.js speichern. Wenn ich den Dimensionsstatus als Abhängigkeit von useEffect übergebe, führt dies zu einer Endlosschleife. Bitte hilf mir. </p> <pre class="brush:php;toolbar:false;">**Home.js-Komponente** const Home = () => const [heightNav, setHeightNav] = useState(0); useEffect(() => { console.log(heightNav); }, [heightNav]); zurückkehren ( <div> <Navigationsleiste setHeight={(h) => setHeightNav(() => h); }} /> </div> ); }; **Navbar.js-Komponente** const Navbar = ({ setHeight }) => const refContainer = useRef(); const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); useEffect(() => { if (refContainer.current) { setDimensions(() => { zurückkehren { Breite: refContainer.current.offsetWidth, Höhe: refContainer.current.offsetHeight, }; }); setHeight(dimensions.height); } }, []); zurückkehren ( <Container ref={refContainer}> </Container> ); };</pre>
P粉647504283
P粉647504283

Antworte allen(1)
P粉420958692

试一下这个导航栏:

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;
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage