Heim >Web-Frontend >Front-End-Fragen und Antworten >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 reagierenDas 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!