So implementieren Sie ein dreistufiges Menü in React

Ich bin bei der Arbeit auf eine Anforderung gestoßen, die eine übergeordnete Menüleiste nur erweitern kann, um die Seite einfach zu halten und das Benutzererlebnis zu verbessern. Ich habe auch lange online gesucht und nichts gefunden, was vollständig erfüllt wurde die Anforderungen, also habe ich es mit dem eigenen Schreiben anderer Leute kombiniert.

So erweitern Sie das dreistufige übergeordnete Menü Sidebar data menu.js

onOpenChange = (openKeys) => {
        const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
        let openList;
        if(this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            if(latestOpenKey&&latestOpenKey.length===3){
                openList = this.state.openKeys.filter((e)=>{
                    return e.length!==3;
                })
                this.setState({
                    openKeys:openList                });
            }else{
                this.setState({
                    openKeys:openKeys                });
            }           
        }else{
            if(latestOpenKey&&latestOpenKey.length===3){
                openList = this.state.openKeys.filter((e)=>{
                    return e.length!==3;
                })
                openList.push(latestOpenKey);
                this.setState({
                    openKeys:openList[1] ? openList : [openList[0],openList[2]]
                });
            }else{
                this.setState({
                    openKeys: latestOpenKey ? [latestOpenKey] : [],
                });
            }            
        }
    }Empfohlenes Lernen: „
Video-Tutorial reagieren
“
Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein dreistufiges Menü in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!