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

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

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

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

javascript 复制代码
import Debug from './first'
import Control from './control'

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

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

javascript 复制代码
                <Menu
                    theme="dark"
                    mode="horizontal"
                    defaultSelectedKeys={[menus[0].key]}
                    items={menus}
                    onClick={clickMenu}
                    style={{ flex: 1, minWidth: 0 }}
                />

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

整体流程代码:

javascript 复制代码
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 } = Layout

const 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 component
    const [content, setContent] = useState(<Control />)

    // click menu item
    const clickMenu = (item: any) => {
        const component = menus.find((menu) => menu.key === item.key)?.value
        setContent(component)
    }

    return (
        <Layout className="layout">
            <Header style={{ display: 'flex', alignItems: 'center' }}>
                <div className="logoBox">1024写作助手</div>
                <Menu
                    theme="dark"
                    mode="horizontal"
                    defaultSelectedKeys={[menus[0].key]}
                    items={menus}
                    onClick={clickMenu}
                    style={{ flex: 1, minWidth: 0 }}
                />
            </Header>
            <Content style={{ padding: '0 48px' }}>
                <div
                    style={{
                        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
相关推荐
爱喝水的小周1 小时前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen02111 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅1 小时前
介绍electron
前端·javascript·electron
周胡杰1 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
31535669131 小时前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑1 小时前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue771 小时前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
轻语呢喃2 小时前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人2 小时前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD2 小时前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端