使用 Permission 控制 Ant Design SubMenu 菜单显示

<SubMenu key={data.key} title={

{data.text}

{canViewSubMenu && renderMenuItem(children, options)}

要让一个 permission 控制 SubMenu 中某一个菜单显示，你可以在 SubMenu 组件中添加一个判断条件，根据该 permission 的值决定是否渲染该菜单。

例如，假设你有一个名为 'canViewSubMenu' 的 permission，你可以按照以下方式修改代码：

import { SubMenu } from 'antd';

// ...

<SubMenu
  key={data.key}
  title={
    <div>
      <span><img src={icon} className='menu-icon'/> {data.text}</span>
    </div>
  }
>
  {canViewSubMenu && renderMenuItem(children, options)}
</SubMenu>

在上面的代码中，我们使用了一个变量 canViewSubMenu 来表示是否有权限查看该 SubMenu 菜单。只有当 canViewSubMenu 为 true 时， renderMenuItem(children, options) 才会被渲染出来。

这样，根据 canViewSubMenu 的值，你就可以控制 SubMenu 中某一个菜单的显示与隐藏了。