Material-UI MenuItem展示二层子级

要在Material-UI的MenuItem组件中展示二层子级，可以使用Menu组件和嵌套的MenuItem组件。首先，您需要在MenuItem组件中添加一个onClick事件，以便在单击时打开下一级菜单。然后，在onClick事件处理程序中，使用Menu组件来呈现下一级菜单，并将其相对于当前MenuItem组件定位。下面是一个示例代码：

import React, { useState } from 'react';
import { Menu, MenuItem, Typography } from '@material-ui/core';

function MyMenu() {
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <MenuItem onClick={handleClick}>
        <Typography variant="inherit">First Level Item</Typography>
      </MenuItem>
      <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>
          <Typography variant="inherit">Second Level Item 1</Typography>
        </MenuItem>
        <MenuItem onClick={handleClose}>
          <Typography variant="inherit">Second Level Item 2</Typography>
        </MenuItem>
      </Menu>
    </div>
  );
}

在上面的示例中，我们在MenuItem组件上添加了一个onClick事件，以便在单击时打开下一级菜单。在handleClick事件处理程序中，我们使用setAnchorEl将anchorEl状态设置为当前事件的目标。接下来，我们在Menu组件中呈现下一级菜单，并将其相对于当前MenuItem组件定位。最后，我们在每个子级MenuItem组件上添加了一个onClick事件处理程序，以便在单击时关闭菜单。