无法使Popover显示在对话框中的正确位置 [英] Can't get Popover to display in correct position in Dialog

问题描述

我有一个对话框，并且有一个ListItem，当您单击它时，将显示一个Popover进入编辑模式.这在使用Modal的MUI的较旧版本中有效，但是由于无法使用最新版本，因此我正在尝试使用Popover.我试图在CodeSandox上做一个简单的例子，但是行得通.发生的情况是Popover始终位于页面的左上方，而不是ListItem.

我已经将代码简化为Dialog中的简单Button和Popover，但仍然存在相同的问题，并且对接下来的尝试没有任何想法.我在控制台中看到的错误是

  [警告] Material-UI:提供给组件的`anchorEl`道具无效.锚元素应该是文档布局的一部分.确保元素存在于文档中或没有显示. 

单击该项目时，就像示例中一样，执行event.currentTarget，这就是console.log的外观.

  [Log]< button class ="MuiButtonBase-root MuiButton-root MuiButton-text" tabindex ="0" type ="button">(main.chunk.js，第26437行)< span class ="MuiButton-label">点击我</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> 

我什至尝试在Dialog中执行disablePortal并没有解决问题.我还尝试使用ref来修复anchorEl警告，但仍相对于页面而不是相对于元素显示.有什么想法吗?

解决方案

对于使用Material UI遇到此问题的任何人，您都可以做几件事.

一个方法是确保如果您有多个嵌套的功能组件，则在保存弹出窗口的特定功能组件中定义弹出窗口的anchorEl/click处理程序.如果您嵌套了功能组件，并且父组件拥有状态，则它将在每次状态更改时重新呈现子级，这可以重置anchorEl参考.

第二个-React.memo可以防止在功能组件上不必要的重新渲染(仅在prop不变的情况下才起作用，但仍应在子组件中获得性能收益).

I have a Dialog and have a ListItem that when you click on it goes into edit mode by showing a Popover. This was working in an older version of MUI using a Modal but since getting on the latest that didn't work and I'm trying to use a Popover. I tried to make a simple example on CodeSandox but that works. What happens is the Popover is always in the upper left of the page instead of the ListItem.

I have simplified my code to a simple Button and Popover in the Dialog and still have the same problem and have ran out of ideas on what to try next. The error I get in the console is

[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.

When the item is clicked I do event.currentTarget just like in the examples and this is what the console.log looks like for it.

[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>

I even tried doing disablePortal in the Dialog which didn't fix it. I also tried using refs which fixed the anchorEl warning but still displays relative to the page and not the element. Any ideas?

解决方案

For anyone that comes across this issue with Material UI, there are a couple of things that you can do.

One is to make sure that if you have multiple nested functional components, that your anchorEl / click handlers for the popover are defined within the specific functional component that holds the popover. If you have nested functional components and the parent component holds the state, it will rerender the children on every state change, which can reset the anchorEl reference.

Second - React.memo can prevent unnecessary rerenders on functional components (it only works if props don't change but should still reap performance benefits in child components).

这篇关于无法使Popover显示在对话框中的正确位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！