<p>如何在Home.js组件中获取Navbar.js组件中dimensions对象的最新更新值？我尝试将一个回调函数作为props从Home.js传递给Navbar.js（因为Home.js是Navbar.js的父组件），但我无法在Navbar.js中存储新更新的dimensions状态值。如果我将dimensions状态作为useEffect的依赖项传递，会导致无限循环。请帮助我。</p> <pre class="brush:php;toolbar:false;">**Home.js组件** const Home = () =&gt; { const [heightNav, setHeightNav] = useState(0); useEffect(() =&gt; { console.log(heightNav); }, [heightNav]); return ( &lt;div&gt; &lt;Navbar setHeight={(h) =&gt; { setHeightNav(() =&gt; h); }} /&gt; &lt;/div&gt; ); }; **Navbar.js组件** const Navbar = ({ setHeight }) =&gt; { const refContainer = useRef(); const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); useEffect(() =&gt; { if (refContainer.current) { setDimensions(() =&gt; { return { width: refContainer.current.offsetWidth, height: refContainer.current.offsetHeight, }; }); setHeight(dimensions.height); } }, []); return ( &lt;Container ref={refContainer}&gt; &lt;/Container&gt; ); };</pre>

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;