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

2024-04-19 22:12

本文主要是介绍react18 antd 引入导航栏之后一些bug,解决方法收集,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

概述:

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


问题描述

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

实现代码

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里面跳转到对应的路由  编程式导航跳转,利用到一个hooknavigateTo(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,进行下载项目代码

这篇关于react18 antd 引入导航栏之后一些bug,解决方法收集的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/918567

相关文章

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Java中Switch Case多个条件处理方法举例

《Java中SwitchCase多个条件处理方法举例》Java中switch语句用于根据变量值执行不同代码块,适用于多个条件的处理,:本文主要介绍Java中SwitchCase多个条件处理的相... 目录前言基本语法处理多个条件示例1:合并相同代码的多个case示例2:通过字符串合并多个case进阶用法使用

Mysql如何解决死锁问题

《Mysql如何解决死锁问题》:本文主要介绍Mysql如何解决死锁问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录【一】mysql中锁分类和加锁情况【1】按锁的粒度分类全局锁表级锁行级锁【2】按锁的模式分类【二】加锁方式的影响因素【三】Mysql的死锁情况【1

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

SpringBoot内嵌Tomcat临时目录问题及解决

《SpringBoot内嵌Tomcat临时目录问题及解决》:本文主要介绍SpringBoot内嵌Tomcat临时目录问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录SprinjavascriptgBoot内嵌Tomcat临时目录问题1.背景2.方案3.代码中配置t

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

Spring 基于XML配置 bean管理 Bean-IOC的方法

《Spring基于XML配置bean管理Bean-IOC的方法》:本文主要介绍Spring基于XML配置bean管理Bean-IOC的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一... 目录一. spring学习的核心内容二. 基于 XML 配置 bean1. 通过类型来获取 bean2. 通过

基于Python实现读取嵌套压缩包下文件的方法

《基于Python实现读取嵌套压缩包下文件的方法》工作中遇到的问题,需要用Python实现嵌套压缩包下文件读取,本文给大家介绍了详细的解决方法,并有相关的代码示例供大家参考,需要的朋友可以参考下... 目录思路完整代码代码优化思路打开外层zip压缩包并遍历文件:使用with zipfile.ZipFil

Python处理函数调用超时的四种方法

《Python处理函数调用超时的四种方法》在实际开发过程中,我们可能会遇到一些场景,需要对函数的执行时间进行限制,例如,当一个函数执行时间过长时,可能会导致程序卡顿、资源占用过高,因此,在某些情况下,... 目录前言func-timeout1. 安装 func-timeout2. 基本用法自定义进程subp

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4: