javascript - 在 Reactjs 中退出全屏

Question

我有一个 React 组件，其中包含一个使用 html5 FullScreen API (RequestFullScreen) 全屏放置的元素。

例如，

handleFullScreenClick() {
    if (this.refs.myElement.requestFullscreen) {
      this.refs.myElement.requestFullscreen();
    } else if (this.refs.myElement.mozRequestFullScreen) {
      this.refs.myElement.mozRequestFullScreen();
    } else if (this.refs.myElement.webkitRequestFullscreen) {
      this.refs.myElement.webkitRequestFullscreen();
    }
  }

现在，我希望能够在按下按钮时退出全屏。当我搜索全屏 API 时，我发现 ExitFullScreen 函数必须由 document 元素调用，而 React 组件无法访问该函数。

有什么方法可以访问我的 react 组件中的文档元素以调用 ExitFullScreen 函数吗？

非常感谢:)

Answer 1

the document element, which is not accessible to a react component

不知道是谁告诉你的，但这不是真的(而且 document 不是一个元素)。 Document接口(interface)由全局对象 document 表示，该对象可在 JS 代码的任何部分使用。所以你可以直接使用它:

handleExitFullScreenClick() {
  document.webkitExitFullscreen()
}