如何隐藏或阻止呈现 antd 子菜单？

Question

我有一个 Menu 如下：

<Menu>
  <SubMenu>
   <Menu.Item>Help</Menu.Item>
   <Menu.Item>Antd</Menu.Item>
  </SubMenu>
</Menu>

现在的问题是我需要在某些情况下隐藏 SubMenu 或 Menu.Item？如下所示：

<Menu>
  <Acl item="submenu">
    <SubMenu>
      <Acl item="help">
        <Menu.Item>Help</Menu.Item>
      </Acl>
      <Menu.Item>Antd</Menu.Item>
    </SubMenu>
  </Acl>
</Menu>

Acl 组件将检查用户对菜单的访问权限并决定隐藏或显示文本。

antd是否有任何代码示例可以达到此结果或有任何建议？

注意：我已经实现了 Acl 如下：

import React, { Component } from 'react';

class Acl extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const props = this.props;
    if( hasAccess(props.item) )
      return <div>{props.children}</div>;
    return null;
  }
}

export default Acl;

但是在渲染之后我得到了这个错误： Cannot read property 'indexOf' of undefined

Answer 1

您可以使用Menu.Item和Menu.Submenu的disabled prop，并根据用户类型使用它来禁用按钮：

<Menu.Item disabled={userAccess()}>    // userAccess() should return a boolean

如果你想完全隐藏按钮，你需要使用条件渲染，例如：

<Menu>
  <Acl item="submenu">
   { (userAccess()) ?          // again should return boolean
    <SubMenu>
      <Acl item="help">
        <Menu.Item>Help</Menu.Item>
      </Acl>
      <Menu.Item>Antd</Menu.Item>
    </SubMenu> : ''
   }
  </Acl>
</Menu>

Answer 2

我认为可以按以下方式完成：

render() {
  const { getAccessByPath } = this.props; //selector from redux store
  <Menu>
  { getAccessByPath('submenu') ?
    <SubMenu>
     { getAccessByPath('submenu.help') ? 
         <Menu.Item>Help</Menu.Item> : ''
     }
     <Menu.Item>Antd</Menu.Item>
    </SubMenu> : ''
  }
  </Menu>
}

这现在有效，但是太讨厌了，如果我有更多的子菜单和菜单项（目前大约 20 个），则无法阅读，但我认为应该有更好的解决方案。

如何隐藏或阻止呈现 antd 子菜单？

How to hide or prevent an antd submenu to be rendered?

reactjs

hide

acl

antd