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
                        }
                      })}
)
相关推荐
工业甲酰苯胺4 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止5 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4167 小时前
HTML面试题
前端·html
张可7 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登8 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js