Ant Design Pro 混合模式下实现顶部菜单点击时显示左侧菜单名称

背景介绍

在Ant Design Pro v6版本中，混合模式布局是一种常见的界面设计方式，它结合了顶部导航和侧边栏导航的优点。然而，在实际开发中，开发者经常会遇到一个需求：当用户点击顶部菜单时，如何在左侧菜单中正确显示当前选中的菜单项名称。

问题分析

混合模式布局下，顶部菜单和左侧菜单实际上是两个独立的导航系统。当用户点击顶部菜单时，系统需要完成以下功能：

1. 记录当前选中的菜单项
2. 更新左侧菜单的显示状态
3. 保持界面状态的一致性

解决方案

核心思路

通过Ant Design Pro提供的运行时布局配置(RunTimeLayoutConfig)机制，我们可以监听菜单选择事件，并动态更新应用状态。具体实现需要以下几个关键步骤：

1. 配置菜单选择事件处理器
2. 更新应用初始状态
3. 自定义菜单标题渲染

代码实现

export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  // 菜单选择事件处理器
  const onSelect = (selectedKeys) => {
    // 更新应用状态
    setInitialState((prevState) => ({
      ...prevState,
      selectedKeys: selectedKeys,
    }));
  };

  // 自定义菜单标题渲染
  const menuTitleRender = (menuItemProps, defaultDom) => {
    // 根据当前状态显示不同的标题
    if (initialState?.selectedKeys?.includes(menuItemProps.key)) {
      return <div className="highlight-menu">{defaultDom}</div>;
    }
    return defaultDom;
  };

  return {
    // 配置菜单属性
    menuProps: {
      onSelect: onSelect,
    },
    // 配置菜单标题渲染
    menuTitleRender: menuTitleRender,
  };
};

实现细节

1. 状态管理：使用setInitialState方法更新应用状态，确保状态变化能够触发组件重新渲染。

2. 菜单高亮：在menuTitleRender函数中，通过检查当前菜单项的key是否在选中的key列表中，来决定是否添加高亮样式。

3. 响应式更新：整个系统是响应式的，当状态更新后，所有依赖该状态的组件都会自动更新。

进阶技巧

多级菜单处理

对于多级菜单的情况，我们需要递归处理菜单项的显示状态：

const menuTitleRender = (menuItemProps, defaultDom) => {
  const isSelected = checkIfSelected(menuItemProps, initialState.selectedKeys);
  return isSelected ? (
    <div className="active-menu-item">
      {defaultDom}
    </div>
  ) : defaultDom;
};

function checkIfSelected(menuItem, selectedKeys) {
  if (selectedKeys.includes(menuItem.key)) return true;
  if (menuItem.children) {
    return menuItem.children.some(child => 
      checkIfSelected(child, selectedKeys)
    );
  }
  return false;
}

状态持久化

为了在页面刷新后保持菜单状态，可以将选中的菜单项存储在localStorage中：

const onSelect = (selectedKeys) => {
  localStorage.setItem('lastSelectedMenu', JSON.stringify(selectedKeys));
  setInitialState((prevState) => ({
    ...prevState,
    selectedKeys: selectedKeys,
  }));
};

// 在初始化时读取存储的状态
const loadInitialState = async () => {
  const savedKeys = localStorage.getItem('lastSelectedMenu');
  return {
    selectedKeys: savedKeys ? JSON.parse(savedKeys) : [],
  };
};

最佳实践

1. 性能优化：对于大型菜单系统，建议使用memoization技术避免不必要的重新渲染。

2. 样式定制：通过CSS-in-JS或自定义样式类来增强菜单项的视觉反馈。

3. 错误处理：添加边界情况处理，如菜单项不存在时的回退方案。

4. 可访问性：确保菜单系统符合WCAG标准，支持键盘导航和屏幕阅读器。

总结

在Ant Design Pro中实现混合模式下顶部菜单点击显示左侧菜单名称的功能，关键在于合理利用框架提供的状态管理机制和布局配置API。通过监听菜单选择事件、更新应用状态并自定义菜单渲染，我们可以创建出既美观又功能完善的导航系统。本文介绍的方法不仅解决了基础需求，还提供了处理复杂场景的进阶技巧，帮助开发者构建更加专业的后台管理系统界面。