什么网站专门做境外当地游,鹤壁建设企业网站公司,网络文化经营许可证全国有多少张,网站怎么做图片搜索在开发一个浏览器插件的时候#xff0c;用的plasmo框架和react支持的#xff0c;里面使用react开发一个菜单功能#xff0c;但是又不想使用react-router#xff0c;所以就想着能不能使用一个很简单的方式做一个替代方案#xff1f;那肯定是可以。
我在引入一个组件后用的plasmo框架和react支持的里面使用react开发一个菜单功能但是又不想使用react-router所以就想着能不能使用一个很简单的方式做一个替代方案那肯定是可以。
我在引入一个组件后我想把这个组件和菜单做一个关联映射这样当点击菜单后就可以直接跳转到对应的组件这才是最理想的一个方式。
所以这里我先引入组件然后将组件和菜单做了一个映射关系 import Debug from ./first
import Control from ./controlconst menus [{key: control,label: 流程控制,value: Control /,},{key: debug,label: debug,value: Debug /,},
]
然后将这个menus和antd的菜单项做一个渲染 MenuthemedarkmodehorizontaldefaultSelectedKeys{[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 classNamelayoutHeader style{{ display: flex, alignItems: center }}div classNamelogoBox1024写作助手/divMenuthemedarkmodehorizontaldefaultSelectedKeys{[menus[0].key]}items{menus}onClick{clickMenu}style{{ flex: 1, minWidth: 0 }}//HeaderContent style{{ padding: 0 48px }}divstyle{{background: colorBgContainer,height: 100%,padding: 24,borderRadius: borderRadiusLG,}}{content}/div/ContentFooter style{{ textAlign: center }}Ant Helper ©{new Date().getFullYear()} Created by 1024小神/Footer/Layout)
}export default App
