antd中Menu导航菜单父级选中如何高亮显示

在 Ant Design（antd）中，Menu（导航菜单）组件默认情况下不会自动为父级菜单项设置高亮，当你点击子菜单时，会高亮当前激活的子菜单。如果你希望在父级菜单中也显示高亮，可以通过自定义主题或使用`selectedKeys`属性以及`onSelect`事件来实现。

1. **自定义主题**:
- 如果你使用的是 CSS，可以通过覆盖`menu-item-selected`类的样式来改变选中的外观。例如：

   .ant-menu-item-selected {
     background-color: #f00; /* 高亮颜色 */
   }

2. **selectedKeys**属性:
在`Menu`组件中，你可以设置`selectedKeys`属性，表示已经选择的菜单项的键值。这样，当`selectedKeys`中的键匹配到菜单项的`key`时，该菜单项会被高亮：

   const [selectedKeys, setSelectedKeys] = useState(['parentKey']); // 'parentKey'是你想要高亮的父级菜单的键
   <Menu selectedKeys={selectedKeys} onSelect={(keys) => setSelectedKeys(keys)}>
     <Menu.Item key="parentKey">
       Parent Item
       <Menu.SubMenu>
         <!-- 子菜单 -->
       </Menu.SubMenu>
     </Menu.Item>
   </Menu>

3. **onSelect事件**:
你还可以利用`onSelect`回调函数，在用户选择菜单项时动态更新`selectedKeys`，从而达到高亮效果：

   function handleSelect(key) {
     setSelectedKeys([...selectedKeys, key]);
   }
   <Menu onSelect={handleSelect}>
     <Menu.Item key="parentKey">
       Parent Item
       <Menu.SubMenu>
         <!-- 子菜单 -->
       </Menu.SubMenu>
     </Menu.Item>
   </Menu>

记得在实际应用中，确保`selectedKeys`的管理逻辑清晰，防止在嵌套菜单中出现意外的行为。