React ant 点击导航条闪烁问题解决

 更新时间:2024年04月13日 11:49:42   作者:huoyueyi  
很多小伙伴反馈React ant 点击导航条闪烁,没有传递具体的参数给点击事件 , 导致在函数内部无法准确判断要展示哪个子菜单,可能导致页面状态的短暂变化,出现闪烁效果,下面给大家分享解决方法,感兴趣的的朋友跟随小编一起看看吧

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

另一种点击方式 , 不会闪

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

  // 左侧子菜单弹出
  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
                        }
                      })}
)

到此这篇关于React ant 点击导航条闪烁的文章就介绍到这了,更多相关React ant 导航条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • React 添加引用路径时如何使用@符号作为src文件

    React 添加引用路径时如何使用@符号作为src文件

    这篇文章主要介绍了React 添加引用路径时如何使用@符号作为src文件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • 重新理解 React useRef原理

    重新理解 React useRef原理

    这篇文章主要为大家介绍了React useRef原理的深入理解分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • React使用React.lazy和Suspense实现组件懒加载

    React使用React.lazy和Suspense实现组件懒加载

    React 提供了 React.lazy 和 Suspense 这两个好东西,能让我们实现组件的懒加载,下面就跟随小编一起来了解一下如何使用它们实现懒加载的具体步骤吧
    2025-03-03
  • ahooks正式发布React Hooks工具库

    ahooks正式发布React Hooks工具库

    这篇文章主要为大家介绍了ahooks正式发布值得拥有的React Hooks工具库使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • React封装全屏弹框的方法

    React封装全屏弹框的方法

    这篇文章主要为大家详细介绍了React封装全屏弹框的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • es6在react中的应用代码解析

    es6在react中的应用代码解析

    这篇文章主要介绍了es6在react中的应用代码解析,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-11-11
  • 解析TypeError:import_react_native.AppState.removeEventListener is not a function

    解析TypeError:import_react_native.AppState.removeEventListener

    这篇文章主要为大家介绍了TypeError:import_react_native.AppState.removeEventListener is not a function问题解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • 深入浅析React中diff算法

    深入浅析React中diff算法

    React 最为核心的就是 Virtual DOM 和 Diff 算法,diff算法的基础是Virtual DOM,接下来通过本文给大家介绍React中diff算法的相关知识,对React中diff算法感兴趣的朋友跟随小编一起学习下吧
    2021-05-05
  • Vue 3开发者转型React保姆级教程(含实际项目案例)

    Vue 3开发者转型React保姆级教程(含实际项目案例)

    从Vue转到React并不难,两者作为主流前端框架,核心思想(组件化、声明式编程)一致,但在语法、API设计和最佳实践上存在差,这篇文章主要介绍了Vue3开发者转型React保姆级教程的相关资料,需要的朋友可以参考下
    2026-05-05
  • react中定义变量并使用方式

    react中定义变量并使用方式

    这篇文章主要介绍了react中定义变量并使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02

最新评论