Javascript 有没有办法控制popper中嵌套的材质UI选择在DOM中的装载位置？

我试图在弹出式菜单中放置一个选择菜单。我遇到的问题是，嵌套的选择菜单希望将弹出窗口作为邻居而不是popper的子菜单装载到身体上。这会触发clickaway事件。下面是复制它的代码：

import React，{useState}来自“React”；
导入“/styles.css”；
从“@material ui/core/Popper”导入Popper；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/ClickAwayListener”导入ClickAwayListener；
导出默认函数App（）{
const[popperAnc，setPopperAnc]=useState（null）；
常数popperOpen=布尔值（popperAnc）；
返回(
{
setPopperAnc（如currentTarget）；
}}
>
波普尔锚
{
setPopperAnc（空）；
}}
>
选择我！
);
}

如果您需要使用

选择

-只需使用它（不要使用

文本字段

，它没有任何意义）

您需要确保第二个popper没有呈现为门户（您需要在

Select

元素的

MenuProps

上设置

disabledPortal

）

你需要告诉新菜单在哪里定位以及它的大小

---

{
console.log（“单击离开”）；
setPopperAnc（空）；
}}
>
哇！
选择我！

---

下面是一个工作示例：

您可以在Popper上使用

disablePortal={true}

，但我不确定您指的是什么。它会将Popper放在save div下（您定位为绝对值的那一个），但您的菜单项仍然存在问题。是的，disablePortal将像您所说的那样从div中的popover挂载模态，但问题是我不能在其中使用选择器，因为它最终挂载在div旁边。您说的“在那里使用选择器”是什么意思？什么类型的选择器？您的问题到底是什么？文本字段在一个单独的popover中打开其选项。它安装在Popper的popover之外的某个位置；当我单击它以选择一个选项时，它会因此在Popper的popover之外触发一个click事件。这会导致clickAway事件从ClickAwayListener-closin触发g Popper，这是我试图避免的。因此，您的问题不是

Popper

，而是

Select

（它在

主体下呈现，而不是在ClickAwayListener内呈现）
  <div style={{ position: "absolute" }}>
    <Popper open={popperOpen} anchorEl={popperAnc}>
      <ClickAwayListener
        onClickAway={e => {
          console.log("click away");
          setPopperAnc(null);
        }}
      >
        <div>
          <div>Wow</div>
          <Select
            label="Menu"
            MenuProps={{
              disablePortal: true,
              anchorEl: this,
              style: { marginTop: "20px", width: "150px", height: "200px" }
            }}
          >
            <MenuItem value="select1">Select me!</MenuItem>
          </Select>
        </div>
      </ClickAwayListener>
    </Popper>
  </div>