如何从另一个React组件获取目标组件的高度？

针对你需要动态获取Navbar高度用于平滑滚动、视口动画调整的场景，除了ref转发和原生JS获取外，还有以下几种实用方案：

1. React Context 全局共享尺寸状态 #

利用React原生Context，让Navbar自身监听尺寸变化并将高度存入Context，其他组件通过自定义Hook直接获取，无需繁琐的ref传递。

实现步骤： #

首先创建Navbar的Context和Provider：

// NavbarContext.js
import { createContext, useContext, useState, useEffect, useRef } from 'react';

const NavbarContext = createContext(null);

export function NavbarProvider({ children }) {
  const [navbarHeight, setNavbarHeight] = useState(0);
  const navbarRef = useRef(null);

  // 更新Navbar高度的方法
  const updateNavbarHeight = () => {
    if (navbarRef.current) {
      setNavbarHeight(navbarRef.current.offsetHeight);
    }
  };

  useEffect(() => {
    // 初始化高度
    updateNavbarHeight();
    // 监听窗口 resize
    window.addEventListener('resize', updateNavbarHeight);
    // 监听Navbar自身尺寸变化（比如内容动态更新）
    const resizeObserver = new ResizeObserver(updateNavbarHeight);
    navbarRef.current && resizeObserver.observe(navbarRef.current);

    // 清理副作用
    return () => {
      window.removeEventListener('resize', updateNavbarHeight);
      navbarRef.current && resizeObserver.unobserve(navbarRef.current);
    };
  }, []);

  return (
    <NavbarContext.Provider value={navbarHeight}>
      <div ref={navbarRef}>
        {/* 你的Navbar组件内容 */}
        {children}
      </div>
    </NavbarContext.Provider>
  );
}

// 自定义Hook，方便其他组件获取高度
export function useNavbarHeight() {
  const height = useContext(NavbarContext);
  if (height === null) {
    throw new Error('useNavbarHeight 必须在 NavbarProvider 内部使用');
  }
  return height;
}

其他组件使用示例： #

比如平滑滚动Hook：

// useSmoothScroll.js
import { useNavbarHeight } from './NavbarContext';

export function useSmoothScroll() {
  const navbarHeight = useNavbarHeight();

  const scrollToTarget = (targetId) => {
    const targetElement = document.getElementById(targetId);
    if (targetElement) {
      const targetTop = targetElement.offsetTop - navbarHeight;
      window.scrollTo({
        top: targetTop,
        behavior: 'smooth'
      });
    }
  };

  return scrollToTarget;
}

2. 自定义事件传递尺寸变化 #

通过浏览器自定义事件，让Navbar在尺寸变化时触发事件，需要的组件监听事件获取高度，适合不需要全局共享的场景，耦合度低。

Navbar组件实现： #

import { useRef, useEffect } from 'react';

function Navbar() {
  const navbarRef = useRef(null);

  // 触发自定义事件传递高度
  const emitHeightChange = () => {
    if (navbarRef.current) {
      const height = navbarRef.current.offsetHeight;
      window.dispatchEvent(new CustomEvent('navbar-height-updated', { detail: height }));
    }
  };

  useEffect(() => {
    emitHeightChange();
    window.addEventListener('resize', emitHeightChange);
    const resizeObserver = new ResizeObserver(emitHeightChange);
    navbarRef.current && resizeObserver.observe(navbarRef.current);

    return () => {
      window.removeEventListener('resize', emitHeightChange);
      navbarRef.current && resizeObserver.unobserve(navbarRef.current);
    };
  }, []);

  return <nav ref={navbarRef}>你的Navbar内容</nav>;
}

监听组件实现： #

import { useState, useEffect } from 'react';

function AnimatedSection() {
  const [navbarHeight, setNavbarHeight] = useState(0);

  useEffect(() => {
    // 初始获取一次高度
    const navbar = document.querySelector('nav');
    navbar && setNavbarHeight(navbar.offsetHeight);

    // 监听自定义事件
    const handleHeightUpdate = (e) => {
      setNavbarHeight(e.detail);
    };
    window.addEventListener('navbar-height-updated', handleHeightUpdate);

    return () => {
      window.removeEventListener('navbar-height-updated', handleHeightUpdate);
    };
  }, []);

  // 使用高度调整动画触发条件或样式
  return <section style={{ paddingTop: navbarHeight }}>...</section>;
}

3. 状态管理库统一维护（如Zustand/Redux） #

如果项目已经使用状态管理工具，直接将Navbar高度存入全局状态，Navbar更新时同步状态，其他组件从状态中读取即可。

以轻量状态库Zustand为例：

创建全局状态： #

// navbarStore.js
import { create } from 'zustand';

export const useNavbarStore = create((set) => ({
  height: 0,
  setHeight: (newHeight) => set({ height: newHeight })
}));

Navbar组件同步状态： #

import { useRef, useEffect } from 'react';
import { useNavbarStore } from './navbarStore';

function Navbar() {
  const navbarRef = useRef(null);
  const setHeight = useNavbarStore((state) => state.setHeight);

  const updateHeight = () => {
    navbarRef.current && setHeight(navbarRef.current.offsetHeight);
  };

  useEffect(() => {
    updateHeight();
    window.addEventListener('resize', updateHeight);
    const resizeObserver = new ResizeObserver(updateHeight);
    navbarRef.current && resizeObserver.observe(navbarRef.current);

    return () => {
      window.removeEventListener('resize', updateHeight);
      navbarRef.current && resizeObserver.unobserve(navbarRef.current);
    };
  }, [setHeight]);

  return <nav ref={navbarRef}>你的Navbar内容</nav>;
}

其他组件读取状态： #

import { useNavbarStore } from './navbarStore';

function ScrollButton() {
  const navbarHeight = useNavbarStore((state) => state.height);

  const handleScroll = () => {
    const target = document.getElementById('target');
    target && window.scrollTo({
      top: target.offsetTop - navbarHeight,
      behavior: 'smooth'
    });
  };

  return <button onClick={handleScroll}>滚动到目标</button>;
}

内容的提问来源于stack exchange，提问作者Magnus