React多级下拉菜单高度切换异常（无平滑过渡/高度固定）问题修复求助

我之前也折腾过这个老教程的多级下拉菜单，确实因为React版本更新和API细节变化踩过一模一样的坑！结合你的代码和问题描述，我来给你梳理下修复思路和具体方案：

问题根源分析 #

1. 高度计算时机不对：原来的calcHeight在onEnter时调用，但此时菜单组件还在入场动画中，offsetHeight的数值并不准确；而且你依赖的是外层dropdownRef的高度，而非当前激活菜单的真实高度。
2. 菜单切换时未重新计算高度：切换到settings菜单时，没有重新获取对应菜单的高度，导致容器高度一直停留在主菜单的数值，或者直接固定不变。
3. 初始高度缺失：menuHeight初始值为null，会导致下拉容器一开始高度为0，影响渲染和动画。

具体修复步骤 #

1. 调整高度计算逻辑，绑定对应菜单的Ref

修改calcHeight函数，让它接收当前激活菜单的Ref作为参数，直接计算菜单内容的真实高度，而不是外层容器的高度。

2. 用useEffect监听菜单切换，实时更新高度

当activeMenu状态变化时，自动触发对应菜单的高度计算，确保容器高度和当前菜单内容匹配。

3. 处理初始高度和边界情况

组件挂载时先计算主菜单的高度，同时给容器高度加一个auto的 fallback，避免初始状态下高度异常。

修改后的完整DropdownMenu代码 #

function DropdownMenu() {
  const [activeMenu, setActiveMenu] = useState("main");
  const [menuHeight, setMenuHeight] = useState(null);
  const dropdownRef = useRef(null);
  const mainMenuRef = useRef(null);
  const settingsMenuRef = useRef(null);

  // 计算指定菜单Ref的高度
  function calcHeight(targetRef) {
    if (targetRef?.current) {
      const height = targetRef.current.offsetHeight;
      setMenuHeight(height);
    }
  }

  // 菜单切换时重新计算高度
  useEffect(() => {
    if (activeMenu === "main") {
      calcHeight(mainMenuRef);
    } else if (activeMenu === "settings") {
      calcHeight(settingsMenuRef);
    }
  }, [activeMenu]);

  // 组件挂载时初始化主菜单高度
  useEffect(() => {
    calcHeight(mainMenuRef);
  }, []);

  function DropdownItem(props) {
    return (
      <a href="#" className="menu-item" onClick={() => props.goToMenu && setActiveMenu(props.goToMenu)}>
        <span className="icon-button">{props.leftIcon}</span>
        {props.children}
        <span className="icon-right">{props.rightIcon}</span>
      </a>
    );
  }

  return (
    <div 
      className="dropdown" 
      style={{ height: menuHeight || "auto" }} 
      ref={dropdownRef}
    >
      <CSSTransition
        in={activeMenu === "main"}
        unmountOnExit
        timeout={500}
        classNames="menu-primary"
        nodeRef={mainMenuRef}
      >
        <div className="menu" ref={mainMenuRef}>
          <DropdownItem>My Profile</DropdownItem>
          <DropdownItem 
            leftIcon={<CogIcon />} 
            rightIcon={<ChevronIcon />} 
            goToMenu="settings"
          >
            Settings
          </DropdownItem>
          <DropdownItem leftIcon={<BellIcon />}>Notifications</DropdownItem>
          <DropdownItem leftIcon={<MessengerIcon />}>Messages</DropdownItem>
        </div>
      </CSSTransition>

      <CSSTransition
        in={activeMenu === "settings"}
        unmountOnExit
        timeout={500}
        classNames="menu-secondary"
        nodeRef={settingsMenuRef}
      >
        <div className="menu" ref={settingsMenuRef}>
          <DropdownItem 
            leftIcon={<ArrowIcon />} 
            goToMenu="main"
          >
            Back
          </DropdownItem>
          <DropdownItem leftIcon={<BoltIcon />}>Account Settings</DropdownItem>
          <DropdownItem leftIcon={<CogIcon />}>App Settings</DropdownItem>
          <DropdownItem leftIcon={<BellIcon />}>Notification Settings</DropdownItem>
        </div>
      </CSSTransition>
    </div>
  );
}

额外CSS小优化

确保.menu类使用正确的盒模型，避免内边距导致高度计算偏差：

.menu {
  box-sizing: border-box;
  padding: 1rem;
  /* 保留你原来的其他样式 */
}

修复后效果解释 #

• 每次切换菜单时，useEffect会触发对应菜单Ref的高度计算，把容器高度设置为当前菜单的真实高度，实现平滑的高度过渡。
• 组件初始化时自动计算主菜单高度，解决初始状态下容器高度为0的问题。
• 去掉了原有的onEnter回调，改用状态监听的方式，更符合React Hooks的最佳实践，也避免了动画过程中计算高度的误差。

这样修改后，应该就能解决你遇到的“切换突兀”和“高度固定不变”的问题啦！

内容来源于stack exchange