{...}"."/> {...}".">
Maison > Article > interface Web > Comment implémenter le menu de gauche en réaction
Comment implémenter le menu de gauche dans React : 1. Définissez la structure de routage, un code tel que "const Router = [{title: '',icon: 'laptop',...}]" 2. Présentez le routeur ; fichier, via une boucle de parcours de carte ; 3. Traitez le menu de premier niveau et la barre de menu de sous-niveau, un code tel que "renderSubMnenu = ({title,key,child}) => {...}".
L'environnement d'exploitation de ce tutoriel : système Windows 10, version React18, ordinateur Dell G3.
Comment implémenter le menu de gauche dans React ?
Utilisez React pour implémenter la barre de menu de gauche
Introduction : Utilisez React pour implémenter la barre de menu de gauche
antd est une bibliothèque de composants middle et backend spécialement personnalisée pour React, fournissant un grand nombre de composants que les développeurs peuvent utiliser ,
Adresse officielle du site WebCliquez pour sauter
Au milieu et dans le backend, les éléments de menu sont essentiels Aujourd'hui, je vais utiliser React combiné avec antd pour configurer une colonne de menu
Définissez d'abord le routage. structure
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;
Utilisez celui fourni par antd Menu
Cela doit prendre en compte certaines situations Lorsque l'itinéraire a un menu de premier niveau ou un sous-menu en dessous, il doit être traité
Introduisez le fichier du routeur et traversez. la boucle à travers la carte
Parcourir la carte pour déterminer s'il existe un menu de deuxième niveau
-
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>
Menu de premier niveau de traitement
renderMenu =({title,key}) => { return ( <Menu.Item key={key}> <Link to={key}> <span>{title}</span> </Link> </Menu.Item> ) }
Récursion de la barre de menu de sous-niveau de traitement
renderSubMnenu = ({title,key,child}) => { return ( <SubMenu key={key} title={title}> { child && child.map(item => { return item.child && item.child.length > 0 ? this.renderSubMnenu(item) : this.renderMenu(item) }) } </SubMenu> ) }
Sélection du menu de traitement , mettant en évidence, actualisant et conservant l'état sélectionné
Selon l'API fournie par antd pour fonctionner
selectedKeys Le tableau de clés de l'élément de menu actuellement sélectionné openKeys, le tableau de clés de l'élément de menu du sous-menu actuellement développé
constructor(props) { super(props); this.state= { selectedKeys:[], openKeys:[] } } componentDidMount(){ // 菜单状态 const pathname = this.props.location.pathname; const menukey = pathname.split("/").slice(0,3).join('/'); const menuHigh = { selectedKeys: pathname, openKeys: menukey } this.selectMenuHigh(menuHigh) } selectMenu =({item,key,keyPath}) => { // 选中菜单 const menuHigh = { selectedKeys: key, openKeys: keyPath[keyPath.length - 1] } this.selectMenuHigh(menuHigh) } openMenu = (openKeys) => { // 展开 this.setState({ openKeys: [openKeys[openKeys.length - 1]] }) } selectMenuHigh = ({selectedKeys,openKeys}) => { // 菜单高亮 this.setState({ selectedKeys: [selectedKeys], openKeys: [openKeys] }) }
Code complet
import React, { Component,Fragment } from 'react' import {Link,withRouter} from 'react-router-dom' import Router from './../../router/index' import { Menu } from 'antd'; const { SubMenu } = Menu; class AsideMenu extends Component { constructor(props) { super(props); this.state= { selectedKeys:[], openKeys:[] } } componentDidMount(){ // 菜单状态 const pathname = this.props.location.pathname; const menukey = pathname.split("/").slice(0,3).join('/'); const menuHigh = { selectedKeys: pathname, openKeys: menukey } this.selectMenuHigh(menuHigh) } selectMenu =({item,key,keyPath}) => { // 选中菜单 const menuHigh = { selectedKeys: key, openKeys: keyPath[keyPath.length - 1] } this.selectMenuHigh(menuHigh) } openMenu = (openKeys) => { // 展开 this.setState({ openKeys: [openKeys[openKeys.length - 1]] }) } selectMenuHigh = ({selectedKeys,openKeys}) => { // 菜单高亮 this.setState({ selectedKeys: [selectedKeys], openKeys: [openKeys] }) } // 处理一级菜单栏 renderMenu =({title,key}) => { return ( <Menu.Item key={key}> <Link to={key}> <span>{title}</span> </Link> </Menu.Item> ) } // 处理子级菜单栏 renderSubMnenu = ({title,key,child}) => { return ( <SubMenu key={key} title={title}> { child && child.map(item => { return item.child && item.child.length > 0 ? this.renderSubMnenu(item) : this.renderMenu(item) }) } </SubMenu> ) } render() { const { selectedKeys,openKeys } = this.state return () } } export default withRouter(AsideMenu)
Apprentissage recommandé : "Tutoriel vidéo React"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!