React hooks动态配置侧边栏

React hooks根据不同需求 还有不同的角色 动态的去配置侧边栏

需求:
点击某个按钮是一套侧边栏 ,不同角色(比如管理员之类的权限高一点)比普通用户多个侧边栏


然后点击另一个按钮是另一套侧边栏

此时,就需要动态的去配置侧边栏了

我这里就不详细的配置路由和路由跳转了 只展示一下配置不同侧边栏的方法和代码

侧边栏:

自己定一个类型,然后就将对应的侧边栏传进去


这样就实现了两套不同侧边栏

然后是侧边栏不同角色显示

如下:


完毕!

现在是下午5.21 今天又是一年高考 好像离我很远很远啦 上班后就太太太羡慕有暑假的小孩啦
高考加油阿 我一个小时后就放端午假啦 考不好的话就要像我一样上班敲代码啦

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/24689.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【React】classnames 优化类名控制

1. 介绍 classnames是一个简单的JS库,可以非常方便的通过条件动态的控制class类名的显示 ClassNames是一个用于有条件处理classname字符串连接的库 简单来说就是动态地去操作类名,把符合条件的类名粘在一起 现在的问题:字符串的拼接方式不…

KMeans聚类分析星

1. datasample initial_centroids datasample(data, k, Replace, false); 是MATLAB中的命令,用于从数据集data中随机抽取k个样本作为初始聚类汇总新,并且抽取时不放回。 datasample:是MATLAB中的函数,用于从数组中随机抽取样本d…

halcon算子之prepare_object_model_3d详解

为某一操作准备三维对象模型。 Description 操作符prepare_object_model_3d准备3D对象模型ObjectModel3D,用于下面目的中给出的操作。它计算操作所需的值并将其存储在ObjectModel3D中,从而加快了后续操作。没有必要调用prepare_object_model_3d。但是,如果要多次使用3D对象…

5、js关于数组的常用方法(19种)

一、改变原数组的方法 1.push() 末尾添加数据 语法: arr.push(要插入的数据可以多个) // push 尾部添加数据const arr [1,2,3,4,5];arr.push(6,7);console.log(arr);//(7) [1, 2, 3, 4, 5, 6, 7]2. pop() 末尾删除一…

大疆智图_空三二维重建成果传输

一、软件环境 1.1 所需软件 1、 大疆智图:点击下载;   2、 ArcGIS Pro 3.1.5:点击下载,建议使用IDM或Aria2等多线程下载器;   3、 IDM下载器:点击下载,或自行搜索;   4、 Fas…

探索 Noisee AI 的奇妙世界与变现之旅

日赚800,利用淘宝/闲鱼进行AI音乐售卖实操 如何让AI生成自己喜欢的歌曲-AI音乐创作的正确方式 抖音主播/电商人员有福了,利用Suno创作产品宣传,让产品动起来-小米Su7 用sunoAI写粤语歌的方法,博主已经亲自实践可行 五音不全也…

[经验] 涠洲岛在广西吗 #职场发展#知识分享#媒体

涠洲岛在广西吗 广西涠洲岛,是中国南海上的一颗闪亮明珠,位于广西北部湾沿海,东经108.71度,北纬21.54度,距离北海市区30公里,是中国最大的海岛之一,风景秀丽,气候温和。岛上山青水秀…

!力扣3. 无重复字符的最长子串

给定一个字符串 s ,请你找出其中不含有重复字符的 最长子串的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是"abc",所以其长度为 3 示例 2: 输入: s "bbbbb" 输出: 1 …

PCE自动装机

服务端和客户端 pxe:c/s模式,允许客户端通过远程服务器(服务端)下载引导镜像,加载安装吻技安,实现自动化安装操作系统。 无人值守:安装选项不需要认为干预,可以自动化实现。 pxe优点: 1.规模…

Overall timing accuracy 和Edge placement accuracy 理解

在电子设计自动化(EDA)、集成电路(IC)制造和高速数字电路设计领域,"Overall Timing Accuracy" 和 "Edge Placement Accuracy" 是两个关键的性能指标,它们对于确保电路的功能正确性和性能至关重要。 当涉及到“Overall timing accuracy”(总体时序精度)…

最小相位系统

最小相位系统 1、传递函数 一个线性系统的响应。 比如一个RC低通滤波器: 交流分量在电容的充放电中被滤除掉,通过设置电容器的电容值,以及电阻值,能够控制这种滤除能力,这个参数为RC。 电容的电抗为 1 / j w C 1/j…

单片机+TN901非接触式红外测温设计

摘要 温度测量技术应用十分广泛,而且在现代设备故障检测领域中也是一项非常重要的技术。但在某些应用领域中,要求测量温度用的传感器不能与被测物体相接触,这就需要一种非接触的测温方式来满足上述测温需求。本论文正是应上述实际需求而设计的…

C语言实战:贪吃蛇(万字详解)

💡目录 效果图 界面设计思路 1. 基本布局 2. 视觉元素 游戏机制设计 基本规则 游戏代码 前期准备 游戏代码详解 数据结构设计 宏定义 数据结构定义 函数原型(详见后文) 主函数代码 核心代码 Review 效果图 界面设计思路 1. 基…

转型AI产品经理(4):“认知负荷”如何应用在Chatbot产品

认知负荷理论主要探讨在学习过程中,人脑处理信息的有限容量以及如何优化信息的呈现方式以促进学习。认知负荷定律认为,学习者的工作记忆容量是有限的,而不同类型的认知任务会对工作记忆产生不同程度的负荷,从而影响学习效果。以下…

Python自学(适用于略有基础)

Python语法(基于C语言基础和简单Python基础) 参考学习资料:【你觉得自己这辈子都学不会编程?超超超基础Python课程,3小时快速入门 【自学Python教程合集】【3小时快速入门Python】】 https://www.bilibili.com/video/B…

Elasticsearch 认证模拟题 - 16

一、题目 创建一个搜索模版,要求 match_prase 查询,并且用指定的格式高亮,并排序 # 创建索引 PUT my_index {"settings": {"number_of_replicas": 0,"number_of_shards": 1},"mappings": {"p…

【SpringCloud学习笔记】Docker(上篇)

Docker 1. 前置准备 在学习Docker之前我们需要具备以下环境: Linux云服务器 / 虚拟机安装并配置Docker环境(命令行中输入docker -v能够显示对应版本证明安装成功) 2. 快速入门 要求: 我们先来尝试使用Docker创建MySQL服务&am…

如何离线下载 Microsoft Corporation II Windows Subsystem for Android

在本文中,我们将指导您通过一个便捷的步骤来离线下载 Microsoft Corporation II Windows Subsystem for Android。这个过程将利用第三方工具来生成直接下载链接,从而让您能够获取该应用程序的安装包,即使在没有访问Microsoft Store的情况下也…

ChatGLM2-6b的本地部署

** 大模型玩了一段时间了,一直没有记录,借假期记录下来 ** ChatGlm2介绍: chatglm2是清华大学发布的中英文双语对话模型,具备强大的问答和对话功能,拥有长达32K的上下文,可以输出比较长的文本。6b的训练参…

HTTP常见响应状态码

1xx:正在处理中 100 Continue:服务器确认收到了请求的第一部分,并告知客户端继续发送剩余的请求。 101 Switching Protocols:服务器根据客户端的请求,同意切换到另一个协议。 2xx:成功响应 200 OK&#…