React ant 点击导航条闪烁问题解决
作者：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 导航条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！