全屏时对material-ui popover做出反应答案

【问题标题】：react material-ui popover while fullscreen全屏时对material-ui popover做出反应
【发布时间】：2017-07-02 22:17:54
【问题描述】：

有没有办法可以在全屏时调整<Popover> 元素 (Element.requestFullscreen())？

默认情况下，它的 DOM 放置在 body 根上，因此，当触发它出现的元素是全屏时，它不会显示。

因此，我的全屏元素上的所有菜单在离开全屏之前永远不会显示。

【问题讨论】：

是的，我刚碰到这个。你弄明白了吗？
@FrankHale 我放弃了自己的实现，将 popover 元素安装在将全屏显示的元素内。

标签： reactjs material-ui

【解决方案1】：

您必须自定义 Popover 的 container 属性

组件。 container 是 Popover 挂载到的 DOM 节点。默认为document.body。这就是为什么Popover 安装在处于全屏模式的元素后面的原因。您必须将容器节点设置为将处于全屏模式的元素。

【讨论】：

【解决方案2】：

Popover 组件的 props 容器：

const containerRef = useRef(null);

<div ref={containerRef}>
   <button onClick={handleOpen}>open</button>
   <Popover container={containerRef.current}>
      ...
   </Popover>
</div>

【讨论】：

如果您能添加一些关于代码的详细功能的信息，可能会对其他读者有所帮助。