React ant 点击导航条闪烁

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

另一种点击方式 , 不会闪

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

javascript 复制代码
  // 左侧子菜单弹出
  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
                        }
                      })}
)
相关推荐
风骏时光牛马13 分钟前
数据可视化管理平台
前端
哎哟喂呢哈23 分钟前
VedioJS 10
javascript·html5
仿生狮子5 小时前
OpenAI 攻下千禧年难题之后,开发者似乎无动于衷
前端·数学·vibecoding
夏幻灵8 小时前
JavaScript this 面试:五种绑定规则、优先级与常见面试陷阱
开发语言·javascript·面试
Lvan的前端笔记8 小时前
docker:每个前端项目一个 Nginx 容器还是只有一个Nginx容器
前端·nginx·docker
三天不学习9 小时前
Egg.js 4 突然爆火,原因是否归结于AI 原生落地需求爆发?
前端·javascript·全栈·egg.js
xcs1940510 小时前
前端 vue 的前端页面debugger 进不去
前端·javascript·vue.js
明月_清风11 小时前
Deno 终局来了:从挑战 Node 到被 Cloudflare 收编
前端·后端·node.js
Csvn12 小时前
框架性能优化
前端
回眸&啤酒鸭13 小时前
【回眸】OpenSwarm 多智能体协作系统实战指南
大数据·前端·人工智能