Wie verstecken oder verhindern Sie, dass ein antd-Untermenü gerendert wird?

Question

Ich habe ein Menu als Gebrüll:

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

Das Problem ist jetzt, dass ich SubMenu oder Menu.Item für einige Situationen verstecken muß? so etwas wie unten:

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

Die Acl Komponente für den Benutzerzugriff auf das Menü überprüfen wird und entscheiden, um den Text zu verbergen oder zeigen.

Gibt es Codebeispiele für antd, um dieses Ergebnis oder Vorschläge zu erreichen?

Hinweis: Ich habe schon Acl als Gebrüll umgesetzt:

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;

Aber nach mache ich diesen Fehler hätte: Cannot read property 'indexOf' of undefined

Answer 1

Ich denke, es als Gebrüll getan werden könnte:

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

Dies funktioniert jetzt aber ist so böse und ist nicht lesbar, wenn ich mehr s habe Ubmenus eine Menüpunkte (derzeit etwa 20), aber ich denke, es sollte eine bessere Lösung sein.

Answer 2

können Sie den disabled prop von Menu.Item verwenden und Menu.Submenu und verwenden Sie es, um die Schaltfläche je nach Benutzertyp zu deaktivieren:

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

Falls Sie die Taste, um völlig zu verbergen, müssen Sie bedingte Rendering benutzen, von der Sorte:

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