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
                        }
                      })}
)
相关推荐
gqkmiss13 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃18 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰23 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye29 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm31 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js