React间接实现一个动态组件逻辑

在开发一个浏览器插件的时候,用的plasmo框架和react支持的,里面使用react开发一个菜单功能,但是又不想使用react-router,所以就想着能不能使用一个很简单的方式做一个替代方案?那肯定是可以。

我在引入一个组件后,我想把这个组件和菜单做一个关联映射,这样当点击菜单后,就可以直接跳转到对应的组件,这才是最理想的一个方式。

所以这里我先引入组件,然后将组件和菜单做了一个映射关系:

import Debug from './first'
import Control from './control'const menus = [{key: `control`,label: `流程控制`,value: <Control />,},{key: `debug`,label: `debug`,value: <Debug />,},
]

然后将这个menus和antd的菜单项做一个渲染:

                <Menutheme="dark"mode="horizontal"defaultSelectedKeys={[menus[0].key]}items={menus}onClick={clickMenu}style={{ flex: 1, minWidth: 0 }}/>

当点击这个菜单的时候,动态修改content的值,然后将这个content渲染到页面上就可以了:

整体流程代码:

import React, { useState } from 'react'
import './index.scss'
import { Layout, Menu, theme } from 'antd'
import Debug from './first'
import Control from './control'
const { Header, Content, Footer } = Layoutconst menus = [{key: `control`,label: `流程控制`,value: <Control />,},{key: `debug`,label: `debug`,value: <Debug />,},
]// menu item
const App: React.FC = () => {const {token: { colorBgContainer, borderRadiusLG },} = theme.useToken()// dynamic show componentconst [content, setContent] = useState(<Control />)// click menu itemconst clickMenu = (item: any) => {const component = menus.find((menu) => menu.key === item.key)?.valuesetContent(component)}return (<Layout className="layout"><Header style={{ display: 'flex', alignItems: 'center' }}><div className="logoBox">1024写作助手</div><Menutheme="dark"mode="horizontal"defaultSelectedKeys={[menus[0].key]}items={menus}onClick={clickMenu}style={{ flex: 1, minWidth: 0 }}/></Header><Content style={{ padding: '0 48px' }}><divstyle={{background: colorBgContainer,height: '100%',padding: 24,borderRadius: borderRadiusLG,}}>{content}</div></Content><Footer style={{ textAlign: 'center' }}>Ant Helper ©{new Date().getFullYear()} Created by 1024小神</Footer></Layout>)
}export default App

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

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

相关文章

vue2响应式 VS vue3响应式

Vue2响应式 存在问题&#xff1a; 新增属性&#xff0c;删除属性&#xff0c;界面不会更新。 直接通过下标修改数组界面不会自动更新。 Vue2使用object.defineProperty来劫持数据是否发生改变&#xff0c;如下&#xff1a; 能监测到获取和修改属性&#xff1a; 新增的属性…

C++笔记:类和对象(一)

类和对象 认识类和对象 先来回忆一下C语言中的类型和变量&#xff0c;类型就像是定义了数据的规则&#xff0c;而变量则是根据这些规则来实际存储数据的容器。类是我们自己定义的一种数据类型&#xff0c;而对象则是这种数据类型的一个具体实例。类就可以理解为类型&#xff0c…

多标签与多分类的区别

多标签与多分类的区别 多标签多分类样本类别个数一个或多个只有一个输出一个标签维度的向量&#xff0c;每一维度是类别的概率[0.1, 0.6, 0.1, 0.1, 0.8]输出属于每个类别的概率[0.1, 0.6, 0.1, 0.1, 0.1]标签多标签的每一维度都是0或者1&#xff0c;类别可以共存&#xff0c;…

移除元素(C++)

给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新长度后面…

line 1:20 no viable alternative at input ‘point,‘

背景 遇到一个蛋疼的问题&#xff0c;搞得老夫难受的一&#xff0c;解决了索性记录下 Creating a new SqlSession SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession61b0005f] was not registered for synchronization because synchronization is not activ…

coco128数据对象类别中英文对照json格式

中英对照 jsonarray [{id: 0,person: 人 }, {id: 1,bicycle: 自行车 }, {id: 2,car: 汽车 }, {id: 3,motorcycle: 摩托车 }, {id: 4,airplane: 飞机 }, {id: 5,bus: 公交车 }, {id: 6,train: 火车 }, {id: 7,truck: 卡车 }, {id: 8,boat: 船 }, {id: 9,trafficlight: 红绿灯 }…

java学习笔记8

15. 多态 15.1 多态概念 ​ java中**多态(Polymorphism )**是指不同对象在调用相同名称方法时,表现的多种不同行为。例如,要实现一个动物叫的方法,由于每种动物的叫声不同,因此可以在方法中接收一个动物参数,当传入的是猫类时发出猫叫,传入狗类时发出狗的叫声。 ​ ja…

python爬虫-----深入了解 requests 库(第二十五天)

&#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; &#x1f388;&#x1f388;所属专栏&#xff1a;python爬虫学习&#x1f388;&#x1f388; ✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天…

安卓接收后台数据转模型int默认为double

问题&#xff1a;后台登录接口返回userid&#xff08;int整型10000&#xff09;&#xff0c;app前端&#xff08;使用okgo&#xff09;拿到userid&#xff08;double类型10000.0&#xff09;&#xff1b;导致app前端进行接下来操作如App中a用户使用userid转字符串后“10000.0”…

openAI tts Java文本转语音完整前后端代码 html

Java后端代码 maven 仓库&#xff1a; <!--openAI 请求工具--> <dependency><groupId>com.unfbx</groupId><artifactId>chatgpt-java</artifactId><version>1.1.5</version> </dependency>maven 仓库官方 tts 使用案例…

浅析RED和EN 18031

文章目录 前言欧盟的法律文件什么是REDRED的发展EU 2022/30法规EU 2023/2444RED与EN 18031的关系 前言 提示&#xff1a;本文大致表述了欧盟的一些立法常识&#xff0c;RED的由来与发展&#xff0c;以及它跟EN 18031的关系 因为工作原因&#xff0c;最近稍微研究了一下欧盟即将…

微波炉定时器开关

微波炉火力调节开关及定时器开关内部结构 参考链接&#xff1a; 微波炉火力调节开关及定时器开关判断好坏小经验-百度经验 (baidu.com)https://jingyan.baidu.com/article/5d6edee2d175c399eadeecfd.html微波炉拆解图示&#xff0c;微波炉结构原理&#xff0c;轻松玩转微波炉维…

DataLoader批量读取数据

使用DataLoader的小例子&#xff0c;这里CustomDataset类的__getitem__方法需要返回tensor。 加载到DataLoader中之后&#xff0c;DataLoader会通过类似字典的方式读取CustomDataset中的数据&#xff0c;达到批量处理的效果。 import torch from torch.utils.data import Datas…

AI大模型探索之路-应用篇14:认识国产开源大模型GLM

目录 前言 一、国产主流大模型概览 1. 国内主流大模型清单 2. 主流大模型综合指数 3. 大语言模型评测榜单 二、GLM大模型介绍 三、GLM大模型发展历程 四、GLM家族之基座模型GLM-130B 五、GLM家族之ChatGLM3 六、GLM家族之WebGLM 七、GLM家族之CogVLM 1. CogVLM 2. …

IP地址和物理地址的理解

1. 引言 最近在学习计算机网络相关知识&#xff0c;很长时间都有个困惑&#xff0c;为什么TCP/IP协议栈中会有2中地址&#xff0c;即&#xff1a;IP地址和物理地址&#xff08;MAC地址&#xff09;为什么同时被使用&#xff1f;它们各自的作用是啥&#xff1f; 2.我的理解 在写…

春招冲刺百题计划|栈

Java基础复习 Java数组的声明与初始化Java ArrayListJava HashMapJava String 类Java LinkedListJava Deque继承LinkedListJava Set 第一题&#xff1a;有效的括号 很简单的题&#xff0c;从大一做到现在&#xff0c;就是复习一下语法。 class Solution {public boolean i…

系统架构最佳实践 -- 新能源汽车产业架构设计

随着环保意识的增强和能源结构的转型&#xff0c;新能源汽车产业正迅速崛起成为汽车行业的新宠。构建一个完善的新能源汽车产业架构对于推动产业发展、提升竞争力至关重要。本文将从设计原则、关键技术、产业生态等方面&#xff0c;探讨如何设计与实现新能源汽车产业架构。 新能…

LabVIEW专栏六、LabVIEW项目

一、梗概 项目&#xff1a;后缀是.lvproj&#xff0c;在实际开发的过程中&#xff0c;一般是要用LabVIEW中的项目来管理代码&#xff0c;也就是说相关的VI或者外部文件&#xff0c;都要放在项目中来管理。 在LabVIEW项目中&#xff0c;是一个互相依赖的整体&#xff0c;可以包…

Python List 列表基础知识

1、什么是列表&#xff1f; 在实际开发中&#xff0c;经常需要将一组&#xff08;不只一个&#xff09;数据存储起来&#xff0c;以便后边的代码使用。说到这里&#xff0c;一些读者可能听说过数组&#xff08;Array&#xff09;&#xff0c;它就可以把多个数据挨个存储到一起…

springboot针对thymeleaf的使用总结

1、遍历 <ul th:if"${not #lists.isEmpty(nav.articleTypeList)}"><li th:each"articleType,articleTypeStat:${nav.articleTypeList}"></li> </ul> 注释&#xff1a;其中${not #lists.isEmpty(list)}先判断list非空&#xff0c…