Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie das linke Menü in React

So implementieren Sie das linke Menü in React

藏色散人
藏色散人Original
2022-12-20 14:41:162835Durchsuche

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}) => {...}“.

So implementieren Sie das linke Menü in React

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: &#39;100%&#39;, 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn