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

相关文章

Nginx设置连接超时并进行测试的方法步骤

《Nginx设置连接超时并进行测试的方法步骤》在高并发场景下,如果客户端与服务器的连接长时间未响应,会占用大量的系统资源,影响其他正常请求的处理效率,为了解决这个问题,可以通过设置Nginx的连接... 目录设置连接超时目的操作步骤测试连接超时测试方法:总结:设置连接超时目的设置客户端与服务器之间的连接

Java判断多个时间段是否重合的方法小结

《Java判断多个时间段是否重合的方法小结》这篇文章主要为大家详细介绍了Java中判断多个时间段是否重合的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录判断多个时间段是否有间隔判断时间段集合是否与某时间段重合判断多个时间段是否有间隔实体类内容public class D

Python使用国内镜像加速pip安装的方法讲解

《Python使用国内镜像加速pip安装的方法讲解》在Python开发中,pip是一个非常重要的工具,用于安装和管理Python的第三方库,然而,在国内使用pip安装依赖时,往往会因为网络问题而导致速... 目录一、pip 工具简介1. 什么是 pip?2. 什么是 -i 参数?二、国内镜像源的选择三、如何

IDEA编译报错“java: 常量字符串过长”的原因及解决方法

《IDEA编译报错“java:常量字符串过长”的原因及解决方法》今天在开发过程中,由于尝试将一个文件的Base64字符串设置为常量,结果导致IDEA编译的时候出现了如下报错java:常量字符串过长,... 目录一、问题描述二、问题原因2.1 理论角度2.2 源码角度三、解决方案解决方案①:StringBui

Linux使用nload监控网络流量的方法

《Linux使用nload监控网络流量的方法》Linux中的nload命令是一个用于实时监控网络流量的工具,它提供了传入和传出流量的可视化表示,帮助用户一目了然地了解网络活动,本文给大家介绍了Linu... 目录简介安装示例用法基础用法指定网络接口限制显示特定流量类型指定刷新率设置流量速率的显示单位监控多个

Java覆盖第三方jar包中的某一个类的实现方法

《Java覆盖第三方jar包中的某一个类的实现方法》在我们日常的开发中,经常需要使用第三方的jar包,有时候我们会发现第三方的jar包中的某一个类有问题,或者我们需要定制化修改其中的逻辑,那么应该如何... 目录一、需求描述二、示例描述三、操作步骤四、验证结果五、实现原理一、需求描述需求描述如下:需要在

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》:本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程

C#中读取XML文件的四种常用方法

《C#中读取XML文件的四种常用方法》Xml是Internet环境中跨平台的,依赖于内容的技术,是当前处理结构化文档信息的有力工具,下面我们就来看看C#中读取XML文件的方法都有哪些吧... 目录XML简介格式C#读取XML文件方法使用XmlDocument使用XmlTextReader/XmlTextWr

mybatis和mybatis-plus设置值为null不起作用问题及解决

《mybatis和mybatis-plus设置值为null不起作用问题及解决》Mybatis-Plus的FieldStrategy主要用于控制新增、更新和查询时对空值的处理策略,通过配置不同的策略类型... 目录MyBATis-plusFieldStrategy作用FieldStrategy类型每种策略的作

C++初始化数组的几种常见方法(简单易懂)

《C++初始化数组的几种常见方法(简单易懂)》本文介绍了C++中数组的初始化方法,包括一维数组和二维数组的初始化,以及用new动态初始化数组,在C++11及以上版本中,还提供了使用std::array... 目录1、初始化一维数组1.1、使用列表初始化(推荐方式)1.2、初始化部分列表1.3、使用std::