react18 antd 引入导航栏之后一些bug,解决方法收集

概述:

我们开发react引入antd之后导航栏会出现刷新不选中、不展开二级导航栏、页面js点击之后不选中最新tab、只能展开一个二级tab之类的问题。那么我们一起来把问题给解决了


问题描述

其实问题这些问题差不多就是一个问题,就是Menu没有刷新选中的状态

实现代码

html 复制代码
import React, { useState ,useEffect } from 'react';
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {Menu} from 'antd';
import {useNavigate ,useLocation} from "react-router-dom"
import type { MenuProps } from 'antd';


type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const items: MenuItem[] = [
  getItem('首页', '/index', <PieChartOutlined />),
  getItem('店铺', '/store', <DesktopOutlined />),
  getItem('商品', 'goods', <UserOutlined />, [
    getItem('平台商品', '/goods/list'),
    getItem('平台添加', '/goods/edit'),
    getItem('平台商品', '/goods/page301'),
    getItem('平台品牌', '48'),
    getItem('自营商品', '55'),
    getItem('自营品牌', '56'),
    getItem('标配商品', '57'),
  ]),
  getItem('订单', 'page4', <UserOutlined />, [
    getItem('采购单', '/page3/page301'),
    getItem('客户订单', '4'),
    getItem('订单列表', '50'),
    getItem('售后列表', '53'),
  ]),
  getItem('财务', 'page5', <UserOutlined />, [
    getItem('结算单列表', '/page3/page301'),
    getItem('我的钱包', '40'),
    getItem('支付密码设置', '52'),
  ]),
  getItem('会员', 'page6', <UserOutlined />, [
    getItem('邀请会员', '/page3/page301'),
    getItem('邀请用户列表', '41'),
  ]),
  getItem('数据', 'page7', <UserOutlined />, [
    getItem('销售统计', '/page3/page301'),
    getItem('售后统计', '42'),
    getItem('商品统计', '43'),
    getItem('操作日记', '44'),
  ]),
  getItem('广告管理', 'page8', <UserOutlined />, [
    getItem('广告位列表', '/page3/page301'),
    getItem('广告列表', '422'),
  ]),
];

const Comp: React.FC = () => {
  
  const navigateTo = useNavigate();
  const currentRouter =  useLocation();
  const [selectedKeys, setSelectedKeys] = useState(currentRouter.pathname);//当前选中项
  const [stateOpenKeys, setStateOpenKeys] = useState(firstOpenkey);//默认二级导航栏
  
  useEffect(() => {//组件动态更新
    setSelectedKeys(currentRouter.pathname)
  })

  const menuClick = (e:{key:string})=>{
    console.log(e.key)
    //在js里面跳转到对应的路由  编程式导航跳转,利用到一个hook
    navigateTo(e.key);
  }

  function firstOpenkey(): string{
    for(let i=0;i<items.length;i++){
      //判断找到情况
      if(items[i]!['children']&&items[i]!['children'].length>0 && items[i]!['children'].find(findkey)){
        return items[i]!.key as string;
      }
    }
    return ''
  }

  function findkey(obj:{key:string}){
    return obj.key===currentRouter.pathname
  }

  const handleonOpenChange =(keys:string[])=>{
    //展开和回收的事件
    setStateOpenKeys(keys[keys.length-1])
  }

  return(
    <Menu 
      theme="dark" 
      defaultSelectedKeys={[currentRouter.pathname]} 
      selectedKeys={[selectedKeys]}
      mode="inline" 
      items={items} 
      onClick={menuClick} 
      onOpenChange={handleonOpenChange}
      openKeys={[stateOpenKeys]}
      />
  )
}

export default Comp;

这样一来就可以通过useNavigate来跳转页会刷新当前的状态,展开相应的二级ta

感兴趣的小伙伴也可以前往https://github.com/yididid/react-manage,进行下载项目代码

相关推荐
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀3 小时前
html初学者第一天
前端·html
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽8 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头8 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全9 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing9 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆9 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试