{...}"."/> {...}".">
Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk melaksanakan menu kiri dalam tindak balas
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;
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: '控制台', 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;
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 './../../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>
untuk memproses Menu peringkat pertama
renderMenu =({title,key}) => { return ( <Menu.Item key={key}> <Link to={key}> <span>{title}</span> </Link> </Menu.Item> ) }
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> ) }
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('/'); 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] }) }
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('/'); 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 () } } export default withRouter(AsideMenu)
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!