반응에서 왼쪽 메뉴를 구현하는 방법-프런트엔드 Q&A-php.cn

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

藏色散人

풀어 주다： 2022-12-20 14:41:16

원래의

2848명이 탐색했습니다.

반응에서 왼쪽 메뉴를 구현하는 방법: 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: &#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;

로그인 후 복사

antd 메뉴에서 제공하는 것을 사용하세요

경로에 1차 메뉴나 하위 메뉴가 있는 경우 처리가 필요한 경우
라우터 파일을 도입하고 트래버스하세요. 지도를 통한 루프
지도를 통과하여 2차 메뉴가 있는지 확인

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>

로그인 후 복사

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(&#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]
        })
    }

로그인 후 복사

전체 코드

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)

로그인 후 복사

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

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