ReactJS コンポーネントのプロパティ値を別のコンポーネントに渡すことができません

Question

Home.js コンポーネントの Navbar.js コンポーネントの寸法オブジェクトの最新の更新値を取得するにはどうすればよいですか? Home.js から Navbar.js にコールバック関数を小道具として渡そうとしましたが (Home.js は Navbar.js の親コンポーネントであるため)、新しく更新されたディメンションの状態値を Navbar.js に保存できません。 useEffect の依存関係としてディメンションの状態を渡すと、無限ループが発生します。私を助けてください。

**Home.js コンポーネント**

const ホーム = () => {
  const [heightNav, setHeightNav] = useState(0);
  useEffect(() => {
    console.log(身長ナビ);
  }, [身長ナビ]);
  戻る （
    <div>
      <ナビゲーションバー
        setHeight={(h) => {
          setHeightNav(() => h);
        }}
      />
    </div>
  );
};

**Navbar.js コンポーネント**

const Navbar = ({ setHeight }) => {
  const refContainer = useRef();
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
  useEffect(() => {
    if (refContainer.current) {
      setDimensions(() => {
        戻る {
          幅: refContainer.current.offsetWidth、
          高さ: refContainer.current.offsetHeight、
        };
      });
      setHeight(dimensions.height);
    }
  }、[]);
  戻る （
    <コンテナ ref={refContainer}>
    </コンテナ>
  );
};

Answer 1

このナビゲーション バーを試してください:

リーリー