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

相关文章

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

Spring事务中@Transactional注解不生效的原因分析与解决

《Spring事务中@Transactional注解不生效的原因分析与解决》在Spring框架中,@Transactional注解是管理数据库事务的核心方式,本文将深入分析事务自调用的底层原理,解释为... 目录1. 引言2. 事务自调用问题重现2.1 示例代码2.2 问题现象3. 为什么事务自调用会失效3

mysql出现ERROR 2003 (HY000): Can‘t connect to MySQL server on ‘localhost‘ (10061)的解决方法

《mysql出现ERROR2003(HY000):Can‘tconnecttoMySQLserveron‘localhost‘(10061)的解决方法》本文主要介绍了mysql出现... 目录前言:第一步:第二步:第三步:总结:前言:当你想通过命令窗口想打开mysql时候发现提http://www.cpp

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T

MySQL INSERT语句实现当记录不存在时插入的几种方法

《MySQLINSERT语句实现当记录不存在时插入的几种方法》MySQL的INSERT语句是用于向数据库表中插入新记录的关键命令,下面:本文主要介绍MySQLINSERT语句实现当记录不存在时... 目录使用 INSERT IGNORE使用 ON DUPLICATE KEY UPDATE使用 REPLACE

SpringBoot启动报错的11个高频问题排查与解决终极指南

《SpringBoot启动报错的11个高频问题排查与解决终极指南》这篇文章主要为大家详细介绍了SpringBoot启动报错的11个高频问题的排查与解决,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一... 目录1. 依赖冲突:NoSuchMethodError 的终极解法2. Bean注入失败:No qu

springboot报错Invalid bound statement (not found)的解决

《springboot报错Invalidboundstatement(notfound)的解决》本文主要介绍了springboot报错Invalidboundstatement(not... 目录一. 问题描述二.解决问题三. 添加配置项 四.其他的解决方案4.1 Mapper 接口与 XML 文件不匹配

一文教你Python引入其他文件夹下的.py文件

《一文教你Python引入其他文件夹下的.py文件》这篇文章主要为大家详细介绍了如何在Python中引入其他文件夹里的.py文件,并探讨几种常见的实现方式,有需要的小伙伴可以根据需求进行选择... 目录1. 使用sys.path动态添加路径2. 使用相对导入(适用于包结构)3. 使用pythonPATH环境

Python中ModuleNotFoundError: No module named ‘timm’的错误解决

《Python中ModuleNotFoundError:Nomodulenamed‘timm’的错误解决》本文主要介绍了Python中ModuleNotFoundError:Nomodulen... 目录一、引言二、错误原因分析三、解决办法1.安装timm模块2. 检查python环境3. 解决安装路径问题