Question

我必须在单击按钮时以全屏模式显示元素。这可行。但是，它不会以全屏模式呈现模式对话框。这是因为此模式对话框是在另一个名为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>

我该如何解决。有人可以帮我吗谢谢。

Answer 1

直接从React组件与DOM交互时，通常需要通过ref进行交互。

这意味着您应该通过组件requestFullscreen()提供的DOM元素而不是ref返回的结果来调用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的更多信息-希望对您有所帮助！

如何使用react将模式对话框置于全屏模式？

1 个答案: