React 动态菜单-不限级递归菜单树

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

import {FC, useState} from "react";
import {Layout, Menu} from 'antd';
import {Link} from 'react-router-dom'
import {getData} from "../../mock-data";

const {Header, Content, Footer, Sider} = Layout;

//菜单数据结构
type  MenuData = {
    id: number,
    name: string;
    link: string;
    children: MenuData[];
};

const Home: FC = (props) => {
    const [openKeys, setOpenKeys] = useState<string[]>([]);
    // setOpenKeys(props.openKeys)

    //定义方法:菜单无限级递归
    function tree(data: { id: string | number; name: string; link: string; children: any }[]) {
        return data.map((item) => {
            if (item.children === undefined) {
                return (<Menu.Item key={item.id}><Link
                    to={
  
  {pathname: item.link, state: {openKeys: openKeys}}}>{item.name}</Link></Menu.Item>)
            } else {
                return (
                    <Menu.SubMenu key={item.id} title={item.name}>
                        {tree(item.children)}
                    </Menu.SubMenu>
                )
            }
        })
    }

    //获取数据并绑定到类型上
    let menuData: MenuData[] = getData() as MenuData[];
    //动态菜单列表
    const elements = tree(menuData);

    return (
        <div>
            <Layout>
                <Sider style={
  
  {width: '100vw', height: '100vh'}}>
                    <Menu theme='dark' mode='inline' onOpenChange={keys => {
                        const keys1 = keys as string[];
                        setOpenKeys(keys1)
                    }}>
                        <div style={
  
  {height: "32px", margin: "16px", background: "rgba(255, 255, 255, 0.3)"}}/>
                        {elements}
                    </Menu>
                </Sider>
                <Layout>
                    <Header>Header</Header>
                    <Content>
                        {props.children}
                    </Content>
                    <Footer>Footer</Footer>
                </Layout>
            </Layout>
        </div>
    );
}
export default Home;