반응에서 왼쪽 메뉴를 구현하는 방법

반응에서 왼쪽 메뉴를 구현하는 방법: 1. 라우팅 구조를 정의하고 "const Router = [{title: '',icon: 'laptop',...}]"와 같은 코드를 정의합니다. 2. 라우터를 소개합니다. 파일, 맵 순회 루프를 통해 3. "renderSubMnenu = ({title,key,child}) => {...}"와 같은 코드인 첫 번째 수준 메뉴 및 하위 수준 메뉴 표시줄을 처리합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, React18 버전, Dell G3 컴퓨터.

React에서 왼쪽 메뉴를 어떻게 구현하나요?

React를 사용하여 왼쪽 메뉴 표시줄 구현

소개: React를 사용하여 왼쪽 메뉴 표시줄 구현

antd는 React용으로 특별히 맞춤화된 중간 및 백엔드 구성 요소 라이브러리로, 개발자가 사용할 수 있는 많은 구성 요소를 제공합니다. ,

• 공식 홈페이지 주소Click to jump

• 미들과 백엔드에서는 메뉴 항목이 필수입니다. 오늘은 antd와 결합된 React를 사용해 메뉴 컬럼을 구성하겠습니다

먼저 라우팅을 정의하겠습니다. 구조

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 메뉴에서 제공하는 것을 사용하세요

• 경로에 1차 메뉴나 하위 메뉴가 있는 경우 처리가 필요한 경우

• 라우터 파일을 도입하고 트래버스하세요. 지도를 통한 루프

• 지도를 통과하여 2차 메뉴가 있는지 확인

-

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>

1차 메뉴 처리

    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 현재 선택된 메뉴 항목 키 배열 openKeys, 현재 확장된 하위 메뉴 항목 키 배열

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

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응에서 왼쪽 메뉴를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!