前端学习笔记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 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