Bagaimana untuk melaksanakan menu kiri dalam tindak balas-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk melaksanakan menu kiri dalam tindak balas

藏色散人

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

asal

2808 orang telah melayarinya

Cara melaksanakan menu kiri dalam tindak balas: 1. Tentukan struktur penghalaan, kod seperti "const Router = [{title: '',icon: 'laptop',...}]"; . Import fail penghala, gelung melalui peta traversal;

Bagaimana untuk melaksanakan menu kiri dalam tindak balas

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi react18, komputer Dell G3.

Bagaimana untuk melaksanakan menu kiri sebagai tindak balas?

Menggunakan React untuk melaksanakan bar menu kiri

Pengenalan: Menggunakan React untuk melaksanakan bar menu kiri

dand disesuaikan khas untuk bertindak balas Pustaka komponen latar belakang menyediakan sejumlah besar komponen untuk digunakan oleh pembangun

Alamat tapak web rasmiKlik untuk melompat
di Di bahagian tengah dan bahagian belakang, item menu adalah penting Hari ini, kami akan menggunakan tindak balas digabungkan dengan antd untuk mengkonfigurasi lajur menu

Tentukan dahulu struktur penghalaan

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;

Salin selepas log masuk

Gunakan ant Menu yang disediakan

perlu dipertimbangkan dalam beberapa situasi apabila laluan mempunyai menu peringkat pertama atau sub-menu di bawah yang perlu diproses,
memperkenalkan fail penghala melalui gelung Map traversal
Melalui peta traversal, tentukan sama ada terdapat menu peringkat kedua

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>

Salin selepas log masuk

untuk memproses Menu peringkat pertama

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

Salin selepas log masuk

mengendalikan rekursi bar sub-menu

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

Salin selepas log masuk

mengendalikan pemilihan menu, menyerlahkan, muat semula untuk mengekalkan keadaan yang dipilih

mengikut antd Disediakan api untuk beroperasi
selectedKeys, tatasusunan kunci item menu yang dipilih pada masa ini, sedang dikembangkan Tatasusunan kunci item menu SubMenu

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

Salin selepas log masuk

Kod lengkap

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)

Salin selepas log masuk

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan menu kiri dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!