react實現左側菜單的方法

今天小編給大家分享的是react實現左側菜單的方法，相信很多人都不太了解，為了讓大家更加了解，所以給大家總結了以下內容，一起往下看吧。一定會有所收獲的哦。

react實現左側菜單的方法：1、定義好路由結構，代碼如“const Router = [{title: '',icon: 'laptop',...}]”；2、引入router文件，通過map遍歷循環；3、處理一級菜單和子級菜單欄，代碼如“renderSubMnenu = ({title,key,child}) => {...}”。

使用React實現左側菜單欄

簡介： 使用React實現左側菜單欄

antd專門為react定制的中后臺組件庫，提供了大量的組件供開發者使用，

• 官網地址 點擊跳轉

• 在中后臺中，菜單項是必不可少的，今天就使用react結合antd配置一個菜單欄目

先定義好路由結構

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;

使用antd提供的Menu

• 這個需要考慮一些情況，當路由有一級菜單或者下面的子菜單需要處理

• 引入router文件,通過map遍歷循環

• 通過map遍歷，判斷是否有二級菜單

-

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>

處理一級菜單

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

處理菜單選擇，高亮，刷新保持選中狀態

• 根據antd提供的api 去操作

• selectedKeys 當前選中的菜單項 key 數組 openKeys, 當前展開的 SubMenu 菜單項 key 數組

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

完整代碼

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 (
            <Fragment>
                <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>
            </Fragment>
        )
    }
}
export default withRouter(AsideMenu)

關于react實現左側菜單的方法就分享到這里了，希望以上內容可以對大家有一定的參考價值，可以學以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。