快捷導航

React ant 點擊導航條閃爍問題解決

更新時間：2024年04月13日 11:49:42 作者：huoyueyi

很多小伙伴反饋React ant 點擊導航條閃爍,沒有傳遞具體的參數(shù)給點擊事件 , 導致在函數(shù)內(nèi)部無法準確判斷要展示哪個子菜單,可能導致頁面狀態(tài)的短暫變化,出現(xiàn)閃爍效果,下面給大家分享解決方法,感興趣的的朋友跟隨小編一起看看吧

問題 : 點擊當前位置會出現(xiàn)閃一下的效果

另一種點擊方式 , 不會閃

原因 : 沒有傳遞具體的參數(shù)給點擊事件 , 導致在函數(shù)內(nèi)部無法準確判斷要展示哪個子菜單，可能導致頁面狀態(tài)的短暫變化，出現(xiàn)閃爍效果
代碼 :

  // 左側(cè)子菜單彈出
  const showSonMenu = routeKey => {
    setDrawerVisible(true)
    setCollapsed(!collapsed)
    setTitle(!title)
    // 根據(jù)點擊的父菜單key來篩選出對應(yīng)的子菜單并更新顯示內(nèi)容
    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) // 假設(shè)展開第一個二級子菜單
    }
    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}
   // 標簽區(qū)域
   <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
                        }
                      })}
)

到此這篇關(guān)于React ant 點擊導航條閃爍的文章就介紹到這了,更多相關(guān)React ant 導航條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: