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;

をしかし後に、私はこのエラーを得たレンダリング：あなたはMenu.ItemとMenu.Submenuのdisabled propを使用することができます Cannot read property 'indexOf' of undefined

Answer 1

私はそれが怒鳴るとして行うことができると思う：

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> 
 
}

これは現在動作していますが、非常に厄介であり、 ubmenusメニュー項目（現在約20）がありますが、もっと良い解決策があるはずです。

Answer 2

をユーザータイプに応じてボタンを無効にするには、

あなたが完全にボタンを非表示にする場合

<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>