react + antd Menu 点击菜单,收起其他展开的所有菜单

本文介绍如何使用React和Ant Design(antd)UI库创建菜单,并在点击菜单时自动折叠其他已展开的子菜单。通过监听Menu组件的事件,结合React的状态管理,可以实现在多级菜单中只保留最新点击项的展开状态,以保持界面清晰,防止数据选择混乱。详细示例和思路分享。
摘要由CSDN通过智能技术生成

献出蚂蚁金服Ui官网:https://ant.design/components/menu-cn/

antd UI  结合 react 很巧的一个搭配

react更具象化的编程路数 

配合antd ui控件事件

很有趣

这是坐的一个小demo 

大体用了

import {
Menu,
Icon,Layout,
Icon,Avatar, Badge, Tooltip, Input
} from 'antd'
左侧导航栏
<menu>   ----左侧大盒
  <Menu.SubMenu>  --- 父级菜单组
    <Menu.Item>  ---父级菜单展开后的内容 
                  <Link to={pathNew}>  ---------点击之后 通过匹配路由
 显示相应内容
 
                     
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值