具有动态内容的 MUI 菜单答案

【问题标题】：MUI Menu with dynamic content具有动态内容的 MUI 菜单
【发布时间】：2023-02-24 09:01:06
【问题描述】：

我试图有一个不同的菜单来显示我在我的应用程序中显示的每个人的名字，但所有菜单中的名字都是相同的。所有按钮也有不同的用户名（这有效）但不是在里面这是我正在做的一个简单示例：

const MyComponent = () => {
  const user = [
    {name: "John"},
    {name: "Marc"},
    {name: "Joe"}
  ];

  const open = Boolean(anchorEl);

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

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

  return(
    <>
      {users.map((user) => (
        <Button
          onClick={handleClick}
          aria-controls={open ? 'account-menu' : undefined}
          aria-haspopup="true"
          aria-expanded={open ? 'true' : undefined}
        >
          {user.name} menu
        </Button>

        <Menu
          anchorEl={anchorEl}
          id="account-menu"
          open={open}
          onClose={handleClose}
          onClick={handleClose}
        >
          <MenuItem>
            {user.name}
          </MenuItem>
        </Menu>
      ))}
    </>
  )
}

我最终得到了每个菜单“约翰”而不是每个菜单都有不同的名字..

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

这可能是因为所有 Menu 组件都由单个 anchorEl 状态控制，并且在打开时堆叠在一起。

看起来目标是让每个Button 托管自己的Menu。如果是这种情况，请考虑将 Button 和 Menu 构建为单独的组件，例如 MyUserButton，以便每个组件都可以管理自己的 anchorEl 状态而不会发生冲突。

在此处的演示中测试：stackblitz

MyUserButton 组件的示例：

const MyUserButton = ({ user }) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);

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

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

  return (
    <>
      <Button
        onClick={handleClick}
        aria-controls={open ? 'account-menu' : undefined}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
      >
        {user.name} menu
      </Button>
      <Menu
        anchorEl={anchorEl}
        id="account-menu"
        open={open}
        onClose={handleClose}
        onClick={handleClose}
      >
        <MenuItem>{user.name}</MenuItem>
      </Menu>
    </>
  );
};

主要的MyComponent可以简化为：

const users = [{ name: 'John' }, { name: 'Marc' }, { name: 'Joe' }];

const MyComponent = () => {
  return (
    <>
      {users.map((user) => (
        <MyUserButton key={user.name} user={user} />
      ))}
    </>
  );
};

【讨论】：