如何使用反应将模态对话框置于全屏模式？答案

【问题标题】：How to put modal dialog in fullscreen mode using react?如何使用反应将模态对话框置于全屏模式？
【发布时间】：2019-05-08 20:34:51
【问题描述】：

我必须在单击按钮时以全屏模式显示元素。这行得通。但是，它不会以全屏模式呈现模式对话框。这是因为这个模态对话框是在另一个名为 modal_root 的 div 中添加的元素，并且这个内容 div 没有在 dom 中呈现。如何确保此模式对话框也以全屏模式呈现？

下面是代码，

<body>
    <div id="root">
        <div class="content"></div>
    </div>
</body>

点击全屏按钮时，我调用以下方法。

open_content_fullscreen = () => {
    let elem = document.querySelector('.content');
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    }
}

现在，当我单击某个按钮说“编辑”时，它会打开模态对话框，该对话框是在 div 中呈现的元素，类 modal_root 并且在 dom 中看不到内容 div，如下所示，

<body>
    <div id="root">
        <div class="modal_root">
            <div class="dialog"></div>
        </div>
    </div>
</body>

我该如何解决这个问题。有人可以帮我解决这个问题。谢谢。

【问题讨论】：

it opens the modal dialog which is the element that is rendered at the other div 是什么意思？
我已经编辑了这个问题。我的意思是当它呈现带有内容类的 div 时，模态对话框在 dom 中看不到。

标签： reactjs

【解决方案1】：

当直接从 React 组件与 DOM 交互时，您通常希望通过 ref 进行交互。

这意味着你应该通过组件ref提供的DOM元素调用requestFullscreen()，而不是通过querySelector()返回的结果。

因此，例如，您可以重构代码以遵循如下模式：

/* An example "root component" */
class RootComponent extends React.Component {

  constructor(props) {
    super(props);

    /* Create a ref to the div that we want to access DOM element of */
    this.fullscreenModal = React.createRef();
  }

  openContentFullscreen = () => {    
      /* let elem = document.querySelector('.content'); */

      /* Access the element of "full screen" div: */
      const elem = this.fullscreenModal.current;

      /* Interact with it as a normal DOM element: */
      if (elem.requestFullscreen) {
          elem.requestFullscreen();
      }
  }

  render() {

      return <div>
        <button onClick={this.openContentFullscreen}>Open Fullscreen</button>

        <div ref={this.fullscreenModal}>
            Hello fullscreen world!
        </div>
      </div>
  }
}

有关refs、see this documentation 的更多信息 - 希望对您有所帮助！

【讨论】：