如何在 React.js 中创建多个 MUI 弹出框？答案

【问题标题】：How to create multiple MUI Popovers in React.js?如何在 React.js 中创建多个 MUI 弹出框？
【发布时间】：2022-11-10 01:10:35
【问题描述】：

请注意！我是 React 和 MUI 的新手，并且我找到了 MUI 文档很难去理解。因此，非常欢迎任何有用的提示或更深入的解释 :) 我不打算立即使用 MUI，但我需要在我的第一个 React 项目中使用弹出框。

我的问题：

我正在尝试创建一个包含多个 MUI Popover 元素的页面。在我用各自的内容创建了我的第一个 Popover 之后，每当我尝试创建另一个 Popover 时，第一个 Popover 都会被新的 Popover 覆盖。

创建多个 MUI Popover 组件时必须包含哪些内容以及为什么要包含这些内容？

我已经包含了一个代码 sn-p 省略了不重要的东西：

import * as React from 'react';
import { Popover, Typography, createTheme } from '@mui/material';

export default function Projects() {

  const [anchorEl, setAnchorEl] = React.useState(null);

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

  const handleClose = () => {
    setAnchorEl(null);
  };
return(
    <div>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        >
        <p> Popover content here lol</p>
       </Popover>
    </div>
);
}

先感谢您。只是想获得新知识！

【问题讨论】：

稍微编辑了您的问题-不要称您的问题愚蠢，我们都需要提出问题来学习！您是否尝试过简单地拥有两个不同的 popover 组件（即两个 <Popover/> 定义，一个在另一个之下），每个都有自己的 anchorEl、id 等？你遇到了什么问题。
您能否也分享您调用handleClick 的代码？

标签： reactjs material-ui

【解决方案1】：

这是一个标准用例，在任何可能配置的应用程序中，您将始终有多个弹出器、弹出框、菜单，它们必须是可移植的，一个单一的核心代码，每个弹出框都有一个 ID 匹配，简单，

我确定 mui 知道这一点，但我必须为每个反 DRY 复制一个新名称的核心锚

显然我遗漏了一些东西，这是一个特殊的只有高级开发人员才能弄清楚它会正确编码，这是反采用

如果有人遇到正确的方法，请给我发电子邮件兄弟

brianux2022@gmail.com

【讨论】：