Antd 菜單 - React Js

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'
    }
];