Antd菜单-

Question

我是一个学习的网页开发，我已经有相当一段时间与这个设计问题。如果有人能教我如何解决这个问题，我将不胜感激。我希望月薪、循环1和循环2成为子菜单，下面是我的代码：

import { Menu } from 'antd';
import { useNavigate } from 'react-router-dom';

const SideMenu = () => {
  const navigate = useNavigate();

  const menuItems = [
    {
      key: "earningCharts",
      label: 'Monthly Earning '
    },
    {
      key: "loop1",
      label: 'Loop 1'
    },
    {
      key: "loop2",
      label: 'Loop 2'
    },

    {
      key: "/",
      label: 'Passenger History'
    },
    {
      key: "user",
      label: 'User'
    },
    {
      key: "settings",
      label: 'Settings'
    }
  ];
  
  return (
    <Menu items={menuItems} onClick={(menuItem) => navigate(menuItem.key)}/>
  )
};

export default SideMenu;

​

​

Answer 1

将children数组添加到要成为子菜单的菜单项：

const menuItems = [
    {
      key: "earningCharts",
      label: 'Monthly Earning '
    },
    {
      key: "loop1",
      label: 'Loop 1',
      children: [{ key: 'someitem1', label: 'Some Item 1' }] // here
    },
    {
      key: "loop2",
      label: 'Loop 2',
      children: [{ key: 'someitem2', label: 'Some Item 2' }] // and here
    },

    {
      key: "/",
      label: 'Passenger History'
    },
    {
      key: "user",
      label: 'User'
    },
    {
      key: "settings",
      label: 'Settings'
    }
];