在material-ui React中处理多个MenuItems

import React from 'react';
import List from '@material-ui/core/List';
import MenuItem from '@material-ui/core/MenuItem';

function MyMenu() {
  return (
    <List component="nav">
      <MenuItem>
        菜单项 1
      </MenuItem>
      <MenuItem>
        菜单项 2
      </MenuItem>
      <MenuItem>
        菜单项 3
      </MenuItem>
    </List>
  );
}

export default MyMenu;

import React from 'react';
import List from '@material-ui/core/List';
import MenuItem from '@material-ui/core/MenuItem';

function MyMenu() {
  const handleItemClick = (item) => {
    // 处理菜单项点击事件
    console.log(`点击了菜单项: ${item}`);
  };

  return (
    <List component="nav">
      <MenuItem onClick={() => handleItemClick('菜单项 1')}>
        菜单项 1
      </MenuItem>
      <MenuItem onClick={() => handleItemClick('菜单项 2')}>
        菜单项 2
      </MenuItem>
      <MenuItem onClick={() => handleItemClick('菜单项 3')}>
        菜单项 3
      </MenuItem>
    </List>
  );
}

export default MyMenu;