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

ops/2024/9/20 15:41:13/
htmledit_views">

概述:

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


问题描述

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

实现代码

html">import React, { useState ,useEffect } from 'html" title=react>react';
import {DesktopOutlined,FileOutlined,PieChartOutlined,TeamOutlined,UserOutlined,
} from '@ant-design/icons';
import {Menu} from 'antd';
import {useNavigate ,useLocation} from "html" title=react>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/html" title=react>react-manage,进行下载项目代码


http://www.ppmy.cn/ops/3341.html

相关文章

hyperf统一请求响应

2024年4月18日08:48:45 以下是两个方案&#xff1a; 1&#xff0c;使用注解&#xff0c;直接返回 <?phpnamespace App\Utils;use App\Utils\GlobalCode; use App\Utils\GlobalMsg; use Hyperf\Contract\ContainerInterface; use Hyperf\Di\Annotation\Inject; use Hyper…

CentOS 7静默安装Oracle 11g(记一次最小化CentOS 7安装Oracle 11g的经历)

# [pdf在线免费转word文档](https://orcc.online/pdf) https://orcc.online/pdf 1.最小化安装CentOS 7后首先设置一下固定IP 可以先查询一下自己的网卡设备的名称&#xff0c;是ens33&#xff0c;所以网卡配置文件名称就是ifcfg-ens33&#xff08;前面的ifcfg-不用管&#xf…

backtracking Leetcode 回溯算法题

77.组合 第一个位置选择有 n 种&#xff0c;接下来每个位置只能在前面选择数字的后面选&#xff0c;所以有了 beg 参数&#xff0c;才能保持不重复 剪枝&#xff1a;res.size (n - beg 1) < k , 已有答案的长度 剩余所有未选择的个数 都小于最终答案长度了 就没有必要尝…

AlgorithmDay17

day17 110平衡二叉树&#xff08;优先递归&#xff09; 判断是不是所有节点的左右子树的深度相差不超过 1。 其实是判断高度。 所以采用&#xff1a;后序遍历递归 递归三部曲&#xff1a; 1.终止条件 if(rootnullptr)return true;2.返回值和参数 bool isBalanced(TreeNo…

探索MATLAB在计算机视觉与深度学习领域的实战应用

随着人工智能技术的快速发展&#xff0c;计算机视觉与深度学习已成为科技领域中最热门、最具挑战性的研究方向之一。 它们的应用范围从简单的图像处理扩展到了自动驾驶、医疗影像分析、智能监控行业等多个领域。 在这样的背景下&#xff0c;《MATLAB计算机视觉与深度学习实战…

社媒矩阵运营解决方案:海外云手机

在全球化的浪潮下&#xff0c;企业愈发认识到通过海外社交媒体平台扩大影响力、树立品牌形象及抢占国际市场的巨大机遇。因此&#xff0c;运营海外社交媒体账户已逐渐成为企业战略部署的重要组成部分。为了全面捕捉多渠道的流量&#xff0c;众多企业选择同时运营多个平台的多个…

Linux下SPI设备驱动实验:验证SPI节点及ICM20608设备子节点

一. 简介 前一篇文章在设备树文件中创建了SPI的 IO 的 pinctrl节点&#xff0c;SPI节点及ICM20608设备子节点&#xff0c;文章如下&#xff1a; Linux下SPI设备驱动实验&#xff1a;创建SPI节点及SPI设备子节点-CSDN博客 本文对设备树文件进行加载测试&#xff0c;确定SPI节…

步步精科技获得发明型专利,提升Type-C连接器行业竞争力

在电子科技日新月异的时代&#xff0c;连接器作为电子设备中不可或缺的一部分&#xff0c;其安全性、稳定性和性能水平直接关系到设备的使用效果和用户体验。深圳市步步精科技有限公司&#xff08;以下简称“步步精科技”&#xff09;一直致力于连接器领域的技术创新和产品研发…