Tidak dapat menghantar nilai harta komponen ReactJS kepada komponen lain

Question

Bagaimana untuk mendapatkan nilai terkini objek dimensi yang dikemas kini dalam komponen Navbar.js dalam komponen Home.js? Saya cuba menghantar fungsi panggil balik sebagai prop daripada Home.js kepada Navbar.js (memandangkan Home.js ialah komponen induk Navbar.js), tetapi saya tidak boleh menyimpan nilai keadaan dimensi yang baru dikemas kini dalam Navbar.js. Jika saya melepasi keadaan dimensi sebagai pergantungan useEffect, ia menyebabkan gelung tak terhingga. tolong saya.

**Komponen Home.js**

const Laman Utama = () =>
  const [heightNav, setHeightNav] = useState(0);
  useEffect(() => {
    console.log(heightNav);
  }, [heightNav]);
  kembali (
    <div>
      <Navbar
        setHeight={(h) =>
          setHeightNav(() => h);
        }}
      />
    </div>
  );
};

**Komponen Navbar.js**

const Navbar = ({ setHeight }) =>
  const refContainer = useRef();
  const [dimensi, setDimensions] = useState({ width: 0, height: 0 });
  useEffect(() => {
    jika (refContainer.current) {
      setDimensions(() => {
        kembali {
          lebar: refContainer.current.offsetWidth,
          ketinggian: refContainer.current.offsetHeight,
        };
      });
      setHeight(dimensi.height);
    }
  }, []);
  kembali (
    <Container ref={refContainer}>
    </Bekas>
  );
};

Answer 1

Cuba bar navigasi ini:

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;