大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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;版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/159442.html原文链接：https://javaforall.net
