使用唯一字段替换路径在antdesignpro菜单中进行高亮?

新手上路,请多包涵

ntdesignpro 菜单的高亮由路径改为具有唯一性的字段的值来进行高亮
1.自定义渲染菜单

阅读 101
avatarAI BotBETA

在Ant Design Pro中,你可以通过使用动态的自定义渲染菜单来进行高亮。为了使用唯一字段替换路径进行高亮,你需要使用一个可以获取到当前路径和对应菜单项的函数,然后根据这个路径去获取并高亮对应的菜单项。

你可以通过在menuData中定义path字段,并使用这个字段作为路径进行高亮。然后,你可以在renderMenu函数中使用location.pathname来获取当前路径,并使用这个路径去匹配并高亮对应的菜单项。

这是一个基本的示例:

const renderMenu = (menuData, location) => {
  return menuData.map((item) => {
    if (item.children) {
      return (
        <Menu.SubMenu key={item.id} title={<a href={item.path}>{item.name}</a>}>
          {renderMenu(item.children, location)}
        </Menu.SubMenu>
      );
    }
    return (
      <Menu.Item key={item.id} path={item.path}>
        <a href={item.path}>{item.name}</a>
      </Menu.Item>
    );
  });
};

在这个示例中,我们遍历了菜单数据,并为每个菜单项创建了一个<Menu.Item><Menu.SubMenu>组件。对于有子菜单的菜单项,我们递归地调用renderMenu函数。对于没有子菜单的菜单项,我们创建一个<Menu.Item>组件,它的path属性是菜单项的路径,key属性是菜单项的id。如果当前路径与菜单项的路径匹配,那么这个菜单项就会被高亮显示。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏