前端学习笔记202308学习笔记第八十捌天-菜单数据的整理代码

import { DesktopOutlined, PieChartOutlined } from "@ant-design/icons";
import { Menu, MenuProps } from "antd";
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
 type MenuItem = Required<MenuProps>['items'][number];
// function getItem(
//     label: React.ReactNode,
//     key: React.Key,
//     icon?: React.ReactNode,
//     children?: MenuItem[],
// ): MenuItem {
//     return {
//         key,
//         icon,
//         children,
//         label,
//     } as MenuItem;
// }
// const items: MenuItem[] = [
//     getItem('geyao', '/geyao', <PieChartOutlined />),
//     getItem('fang', '/fang', <DesktopOutlined />),
// ];
const items:MenuItem[]=[
    {label:"geyao",key:"geyao",icon:<PieChartOutlined />},
    {label:"fang",key:"fang",icon: <DesktopOutlined />}
]
const MainMenu: React.FC = () => {
    const [openkeys, setOpenkeys] = useState(['']);
    const nevigateTo = useNavigate()
    const menuClick = (e: any) => {
        nevigateTo(e.key)

    }
    const handleChange = (keys: string[]) => {
        setOpenkeys([keys[keys.length - 1]])
    }
    return (
        <>
            <div className="logo" />
            <Menu openKeys={openkeys} onOpenChange={handleChange} theme="dark" onClick={menuClick} defaultSelectedKeys={['/geyao']} mode="inline" items={items} />
        </>
    )
}
export default MainMenu