How to implement left menu in react-Front-end Q&A-php.cn

How to implement left menu in react

藏色散人

Release： 2022-12-20 14:41:16

Original

2848 people have browsed it

How to implement the left menu in react: 1. Define the routing structure, code such as "const Router = [{title: '',icon: 'laptop',...}]"; 2. Import router file, loop through map traversal; 3. Process the first-level menu and sub-level menu bar, code such as "renderSubMnenu = ({title,key,child}) => {...}".

How to implement left menu in react

#The operating environment of this tutorial: Windows 10 system, react18 version, Dell G3 computer.

How to implement the left menu in react?

Use React to implement the left menu bar

Introduction: Use React to implement the left menu bar

antd is specially customized for react The background component library provides a large number of components for developers to use.

Official website addressClick to jump
in In the middle and backend, menu items are essential. Today, we will use react combined with antd to configure a menu column

First define the routing structure

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

Copy after login

Use the one provided by antd Menu

This needs to be considered in some situations. When the route has a first-level menu or the submenu below needs to be processed
Introduce the router file and traverse it through map Loop
Traverse through the map to determine whether there is a second-level menu

import Router from &#39;./../../router/index&#39;
import {  Menu } from &#39;antd&#39;;
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>

Copy after login

Processing the first-level menu

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

Copy after login

Processing sub-menu bar recursion

  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>
        )
        
    }

Copy after login

Processing menu selection, highlighting, refreshing and keeping the selected state

Operation based on the api provided by antd
selectedKeys The currently selected menu item key array openKeys, the currently expanded SubMenu menu item key array

constructor(props) {
        super(props);
        this.state= {
            selectedKeys:[],
            openKeys:[]
        }
    }
    componentDidMount(){
        // 菜单状态
        const pathname = this.props.location.pathname;
        const menukey = pathname.split("/").slice(0,3).join(&#39;/&#39;);
        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]
        })
    }

Copy after login

Complete code

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(&#39;/&#39;);
        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 (
            
                
                    {
                        Router && Router.map(firstItem => {
                            return firstItem.child && firstItem.child.length > 0 ? this.renderSubMnenu(firstItem) : this.renderMenu(firstItem)
                        }) 
                    }
                    
                    
            
        )
    }
}
export default withRouter(AsideMenu)

Copy after login

Recommended Study: "react video tutorial"

The above is the detailed content of How to implement left menu in react. For more information, please follow other related articles on the PHP Chinese website!