React ant 点击导航条闪烁

news2024/11/24 11:22:33

问题 : 点击当前位置会出现闪一下的效果


另一种点击方式 , 不会闪

原因 : 没有传递具体的参数给点击事件 , 导致在函数内部无法准确判断要展示哪个子菜单,可能导致页面状态的短暂变化,出现闪烁效果
代码 :
 

  // 左侧子菜单弹出
  const showSonMenu = routeKey => {
    setDrawerVisible(true)
    setCollapsed(!collapsed)
    setTitle(!title)

    // 根据点击的父菜单key来筛选出对应的子菜单并更新显示内容
    const targetRoute = routes.find(route => route.key === routeKey)

    // 获取一级子菜单和二级子菜单的 key 值
    const openKeys = [targetRoute.key]
    if (targetRoute.children && targetRoute.children.length > 0) {
      openKeys.push(targetRoute.children[0].key) // 假设展开第一个二级子菜单
    }
    setDefaultOpenKeys(openKeys)

    // 更新state或其他方式来仅显示目标子菜单
    setSelectedRoute(targetRoute)

    setDrawerVisible(false)  
  }



  // 点击子菜单
  const onClick = e => {
    navigate(e.key)
    setCurrent(e.key)
  }



return (    

{drawerVisible ? (
              <div className='layoutSon'>
                <Menu
                  onClick={onClick}
                  defaultOpenKeys={defaultOpenKeys}
                  selectedKeys={[current]}
                  mode='inline' //子菜单的样式是下拉,而不是弹出
                  theme={Stylebg}
                  items={selectedRoute ? [selectedRoute] : routes}
                />
              </div>
            ) : null}




   // 标签区域
   <Tabs
                      defaultActiveKey='1'
                      items={routeList.slice(-1).map((item, index) => {
                        const id = String(index)
                        const isLastItem = index === routeList.length - 1
                        return {
                          label: (
                            <div className='breadcrumb-box'>
                              {index == 0 ? (
                                <span className='spanIcon'>
                                  <img
                                    src={homeIcon}
                                    alt=''
                                    style={{
                                      width: '17px',
                                      height: '14px',
                                      PointerEvent: 'onne'
                                    }}
                                  />
                                </span>
                              ) : null}
                              {index == 0 ? (
                                <span
                                  className='location'
                                  onClick={() => showSonMenu(currentPosition)}
                                >
                                  当前位置 : {stairSon}
                                  <span className='slash'>/</span>
                                </span>
                              ) : null}
                              <span
                                onClick={() => {
                                  toRouter(item)
                                }}
                                className='breadcrumbTitle'
                              >
                                {activeItem?.label}
                              </span>
                            </div>
                          ),
                          key: id
                        }
                      })}
)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1581303.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Word 画三线表模板---一键套用

1、制作三线表 1&#xff09;设置为无边框 选中表格&#xff0c;点击「右键」——「边框」——「无框线」。 2&#xff09;添加上下边框线 选中表格后&#xff0c;点击【右键】——【表格属性】——【边框和底纹】&#xff0c;边框线选择【1.5磅】&#xff0c;然后点击【上框…

(WSI分类)WSI分类文献小综述 2024

2024的WSI分类。 Multiple Instance Learning Framework with Masked Hard Instance Mining for Whole Slide Image Classification &#xff08;ICCV2024&#xff09; 由于阳性组织只占 Gi- gapixel WSI 的一小部分&#xff0c;因此现有的 MIL 方法直观上侧重于通过注意力机…

算法:day1

前缀树&#xff1a; class Trie {private Trie[] childrenIndex;// 该节点下一个可能出现的所有字符的链接private boolean isEnd;// 该节点是否是最后一个字符// 初始化根节点public Trie() {childrenIndex new Trie[26];isEnd false;}public void insert(String word) {// …

ArcGIS Desktop使用入门(四)工具箱——属性域

系列文章目录 ArcGIS Desktop使用入门&#xff08;一&#xff09;软件初认识 ArcGIS Desktop使用入门&#xff08;二&#xff09;常用工具条——标准工具 ArcGIS Desktop使用入门&#xff08;二&#xff09;常用工具条——编辑器 ArcGIS Desktop使用入门&#xff08;二&#x…

从ChatGPT到多模态大模型:现状与未来(多模态)

ChatGPT 训练的核心技术主要包括: 预训练语言模型;有监督微调;基于人类反馈的 强 化 学 习 (ReinforcementLearningfrom Human Feedback,RLHF) 首先,通过自监督预训练使语言模型从大规模语料库中学习语言规律,具备基础 理解和生成能力;然后,通过构造指令微调数据集 并对模型进…

部署GlusterFS群集

目录 一、部署GlusterFS群集 1. 服务器节点分配 2. 服务器环境&#xff08;所有node节点上操作&#xff09; 2.1 关闭防火墙 2.2 磁盘分区&#xff0c;并挂载 2.3 修改主机名&#xff0c;配置/etc/hosts文件 3. 安装、启动GlusterFS&#xff08;所有node节点上操作&…

34. UE5 RPG实现鼠标点击移动

在前面&#xff0c;我们实现过使用键盘按键wasd去实现控制角色的移动&#xff0c;现在&#xff0c;我们实现了InputAction按键触发&#xff0c;后面&#xff0c;实现一下通过鼠标点击地面实现角色移动。 我们将实现两种效果的切换&#xff0c;如果你点击地面快速松开&#xff0…

​如何使用 ArcGIS Pro 制作带贴图建筑

对于用GIS软件制作三维建筑&#xff0c;很多时候都是制作的建筑体块&#xff0c;这里为大家介绍一下怎么使用 ArcGIS Pro 制作带贴图的建筑&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的数据是从水经微图中下载的建筑数据&#xff0c;除了建筑数据&#xff0c;常见…

浏览器工作原理与实践--渲染流水线:CSS如何影响首次加载时的白屏时间

在上一篇文章中我们详细介绍了DOM的生成过程&#xff0c;并结合具体例子分析了JavaScript是如何阻塞DOM生成的。那本文我们就继续深入聊聊渲染流水线中的CSS。因为CSS是页面中非常重要的资源&#xff0c;它决定了页面最终显示出来的效果&#xff0c;并影响着用户对整个网站的第…

大话设计模式——18.策略模式(Strategy Pattern)

简介 是一系列算法的封装&#xff0c;即做的事情相同&#xff08;方法名称相同&#xff09;但是实现的方式不同&#xff0c;以相同方式调用所有的算法&#xff0c;减少算法与使用算法的耦合。直接调用方法。 UML图 应用场景 Java AWT中的LayoutManager&#xff08;布局管理器&…

开源铱塔切换MySQL数据库启动报异常

1.错误日志&#xff1a; 铱塔切换数据库配置为MySQL之后&#xff0c;启动后报错如下&#xff1a; SqlExceptionHelper - Table iotkit.task_info doesnt exist SqlExceptionHelper - Table iotkit.rule_info doesnt exist SqlExceptionHelper - Table iotkit.device_info does…

微软称在量子纠错领域取得大进展,量子超级计算机能在2033年问世?

大数据产业创新服务媒体 ——聚焦数据 改变商业 自从物理学家费曼&#xff08;Richard Feynman&#xff09;在80年代首次提出了利用量子力学原理进行计算的概念&#xff0c;无数科学家就梦想着用量子计算重塑未来。可惜现实往往“磕磕绊绊”&#xff0c;40多年过去了&#xff…

Element UI前端页面

1.前端 如何用ElementUI快速搭建一个前端网页模板&#xff0c;接下来会详细讲解&#xff01; 1.Container布局 这是ElementUI官网提供的能快速搭建一个网页的基本布局模式&#xff0c;以下是一个网页的基本架构模式&#xff0c;主要分为三大块&#xff1a; AsideHeaderMain 我…

SpringBoot快速入门笔记(7)

文章目录 VueRouter前端路由1、简介2、RouterDemo3、子路由4、动态路由 VueRouter前端路由 1、简介 Vue的单页面应用是基于路由和组件的&#xff0c;不同组件的切换需要前端路由完成 vue-router3只能结合vue2&#xff0c;vue-router4只能结合vue3 安装 npm install vue-router…

FreeGPT3.5 开源软件

GPT-3.5不需要付费&#xff0c;也不需要注册用户&#xff0c;可以直接使用了&#xff0c;官方彻底开放了API接口。 该API政策一放开&#xff0c;GitHub很快就已经出现了一个开源项目FreeGPT35&#xff0c;可以自动生成key调用GPT3.5的API接口&#xff0c;再也用不着注册账号和申…

Hololens2远程音视频通话与AR远程空间标注,基于OpenXR+MRTK3+WebRTC实现

Hololens2远程音视频通话与AR远程空间标注 使用Unity2021.3.21版本开发&#xff0c;基于OpenXRMRTK3.0WebRTC实现。 &#xff08;1&#xff09;通过视频获取视频帧的矩阵的方法可以参考&#xff1a;https://learn.microsoft.com/zh-cn/windows/mixed-reality/develop/advanced…

强化学习:基础开发

基本就是把看到有用的资料整合在一起了 资料 https://blog.csdn.net/weixin_48878618/article/details/133590646 https://blog.csdn.net/weixin_42769131/article/details/104783188?ops_request_misc%257B%2522request%255Fid%2522%253A%2522166792845916800182132771%25…

【azure笔记 1】容器实例管理python sdk封装

容器实例管理python sdk封装 测试结果 说明 这是根据我的需求写的&#xff0c;所以有些参数是写死的&#xff0c;比如cpu核数和内存&#xff0c;你可以根据你的需要自行修改。前置条件&#xff1a; 当前环境已安装python3.8以上版本和azure cli并且已经登陆到你的账户 依赖安…

Angular 使用DomSanitizer

跨站脚本Cross-site scripting 简称XSS&#xff0c;是代码注入的一种&#xff0c;是一种网站应用程序的安全漏洞攻击。它允许恶意用户将代码注入到网页上&#xff0c;其他用户在使用网页时就会收到影响&#xff0c;这类攻击通常包含了HTML和用户端脚本语言&#xff08;JS&…

echarts 条形图(柱状图)多个图例按钮默认高亮一个,且只能高亮一个

核心&#xff1a;给图例按钮添加点击事件 myChart.on("legendselectchanged", function (params) {let selected {功率柜: true,母线柜: false,充电桩终端: false,网络柜: false,};for (let key in selected) {if (key ! params.name) {myChart.setOption({legend:…