Der Eigenschaftswert der ReactJS-Komponente kann nicht an eine andere Komponente übergeben werden

Question

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.

**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>
  );
};

Answer 1

试一下这个导航栏：

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;