reactjs - 无法让 Popover 显示在对话框中的正确位置

Question

我有一个对话框和一个 ListItem，当您单击它时，它会通过显示 Popover 进入编辑模式。这在旧版本的 MUI 中使用 Modal 可以工作，但自从使用最新版本后就不起作用了，我正在尝试使用 Popover。我尝试在 CodeSandox 上制作一个简单的示例，但效果很好。发生的情况是 Popover 始终位于页面的左上角，而不是 ListItem。

我已将代码简化为对话框中的简单按钮和弹出框，但仍然遇到相同的问题，并且对下一步要尝试的内容没有想法。我在控制台中收到的错误是

[Warning] Material-UI: the `anchorEl` prop provided to the component is invalid.
The anchor element should be part of the document layout.
Make sure the element is present in the document or that it's not display none.

当单击该项目时，我会像示例中一样执行 event.currentTarget ，这就是它的 console.log 的样子。

[Log] <button class="MuiButtonBase-root MuiButton-root MuiButton-text" tabindex="0" type="button"> (main.chunk.js, line 26437)
<span class="MuiButton-label">Click Me</span>
<span class="MuiTouchRipple-root">
<span class="MuiTouchRipple-ripple MuiTouchRipple-rippleVisible" style="width: 117.2006825918689px; height: 117.2006825918689px; top: -34.60034129593445px; left: -25.60034129593445px;">
<span class="MuiTouchRipple-child MuiTouchRipple-childLeaving"></span>
</span>
</span>
</button>

我什至尝试在对话框中执行disablePortal，但没有修复它。我还尝试使用 refs 修复了anchorEl警告，但仍然相对于页面而不是元素显示。有什么想法吗？

Answer 1

对于任何遇到 Material UI 问题的人，您可以采取以下措施。

其中之一是确保如果您有多个嵌套功能组件，则弹出窗口的anchorEl/单击处理程序是在保存弹出窗口的特定功能组件中定义的。如果您有嵌套的功能组件并且父组件保存状态，它将在每次状态更改时重新渲染子组件，这可以重置anchorEl引用。

第二 - React.memo 可以防止功能组件上不必要的重新渲染(只有在 props 不变的情况下才有效，但仍应在子组件中获得性能优势)。