使用 Material UI 反應 TypeScript

Question

我想尋求幫助。 我怎樣才能在它們正確和適當的類別菜單下呈現這些菜單？ 目前，它們只是相互堆砌，而不是從其正確的菜單中進行渲染。 我將 React 與 TypeScript 一起使用，我一直在為此不停地工作，但還沒有找到答案。 希望有人能幫忙。

這是問題的示例照片。 它們都重疊並一起渲染，而不是與其他菜單不同地渲染。

• 此消息菜單只會呈現菜單列表下拉菜單。

• 此操作菜單將並且應該只呈現 Ack、Unack、Clear 和 Comment

這是我的源代碼。

const handleClick = (index: null, event: React.MouseEvent<HTMLButtonElement>) => {
  setAnchorEl(event.currentTarget);
};

<Menu
  id="basic-menu"
  anchorEl={anchorEl}
  open={open}
  onClose={handleClose}
  MenuListProps={{
    "aria-labelledby": "basic-button",
  }}
>
  {customtoolinfo.menu_sub.map((custommenusubtool: any) => (
    <MenuItem onClick={handleClose}>
      {custommenusubtool.menu_sub_name}
    </MenuItem>
  ))}
</Menu>

Answer 1

問題是因為所有子菜單的anchorEl值相同。 可以通過多種方式解決此問題。 一種方法是只有一個菜單並根據條件渲染它的子菜單，或者第二種方法是為每個子菜單設置不同的anchorEl狀態並根據菜單控制它們