So implementieren Sie das linke Menü in React

So implementieren Sie das linke Menü in React: 1. Definieren Sie die Routing-Struktur, Code wie „const Router = [{title: '',icon: 'laptop',...}]“ 2. Stellen Sie den Router vor Datei, durch Kartendurchlaufschleife 3. Verarbeiten Sie das Menü der ersten Ebene und die Menüleiste der Unterebene, Code wie „renderSubMnenu = ({title,key,child}) => {...}“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, React18-Version, Dell G3-Computer.

Wie implementiert man das linke Menü in React?

Verwenden Sie React, um die linke Menüleiste zu implementieren.

Einführung: Verwenden Sie React, um die linke Menüleiste zu implementieren.

antd ist eine speziell für React angepasste Middle- und Backend-Komponentenbibliothek, die Entwicklern eine große Anzahl von Komponenten zur Verwendung bereitstellt ,

• Offizielle Website-AdresseZum Springen klicken

• Im mittleren und Backend sind Menüelemente unerlässlich. Heute werde ich React in Kombination mit Antd verwenden, um eine Menüspalte zu konfigurieren.

Definieren Sie zunächst das Routing Struktur

const Router = [{
        title: '控制台',
        icon: 'laptop',
        key: '/index',
        role: ["user", "information", "product"]
    },
    {
        title: '用户管理',
        icon: 'laptop',
        key: '/index/user', // 菜单
        role: ["information", "user"], // 角色 
        child: [{
                key: '/index/user/list',
                title: '用户列表',
                icon: '',
                role: ["user"]
            },
            {
                key: '/index/user/add',
                title: '添加用户',
                icon: '',
                role: ["user"]
            }
        ]
    },
    {
        title: '部门管理',
        icon: 'bars',
        key: '/index/department',
        role: ["user"],
        child: [{
                key: '/index/department/list',
                title: '部门列表',
                icon: '',
                role: ["user"]
            },
            {
                key: '/index/department/add',
                title: '添加部门',
                icon: '',
                role: ["user"]
            },
        ]
    },
    {
        title: '加班',
        icon: 'info-circle-o',
        key: '/home/abouta'
    }
]
export default Router;

Verwenden Sie das von antd bereitgestellte Menü

• Einige Situationen müssen berücksichtigt werden. Wenn die Route ein Menü der ersten Ebene oder ein Untermenü darunter hat, muss sie verarbeitet werden

• Führen Sie die Routerdatei ein und durchlaufen Sie sie Die Schleife durch die Karte , Hervorheben, Aktualisieren und Beibehalten des ausgewählten Zustands

• Gemäß der von antd für den Betrieb bereitgestellten API

selectedKeys Das aktuell ausgewählte Menüelement-Tasten-Array openKeys, das aktuell erweiterte Untermenü-Menüelement-Tasten-Array

import Router from './../../router/index'
import {  Menu } from 'antd';
const { SubMenu } = Menu;
<Menu
                    onOpenChange={this.openMenu}
                    onClick={this.selectMenu}
                    theme="dark"
                    mode="inline"
                    selectedKeys={selectedKeys}
                    openKeys={openKeys}
                    style={{ height: '100%', borderRight: 0 }}
                    >
                    {
                        Router && Router.map(firstItem => {
                            return firstItem.child && firstItem.child.length > 0 ? this.renderSubMnenu(firstItem) : this.renderMenu(firstItem)
                        }) 
                    }
                    
                    </Menu>

Vollständiger Code

    renderMenu =({title,key}) => {
        return (
            <Menu.Item key={key}>
                <Link to={key}>
                    <span>{title}</span>
                </Link>
            </Menu.Item>
        )
    }

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das linke Menü in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!