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

朴灿烈づ我的快乐病毒、 2022-10-15 08:59 168阅读 0赞

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;