前端 - 使用唯一字段替换路径在antdesignpro菜单中进行高亮？

Question

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

Answer 1

在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。如果当前路径与菜单项的路径匹配，那么这个菜单项就会被高亮显示。