react 实现组件全屏

在浏览器中访问页面，需要对页面中的其中一个组件能够实现全屏展示

实现效果

直接复制下面代码到项目中即可使用

import React, { Component } from 'react';

const rootRef = React.createRef();

class FullScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isFullScreen: false
    }
  }
  componentDidMount() {
    // 监听页面全屏事件
    window.onresize = () => {
      // 全屏
      if (document.fullscreenElement) {
        this.setState({ isFullScreen: true });
      }
      // 不是全屏
      else {
        this.setState({ isFullScreen: false });
      }
    }
  }

  // 全屏
  fullScreen = () => {
    if (!this.state.isFullScreen) {
      rootRef.current.requestFullscreen();
    }
  }

  // 退出全屏
  exitFullScreen = () => {
    document.exitFullscreen();
  }

  render() {
    const { isFullScreen } = this.state;
    return (
      

        {/* 哪一个组件想要实现 全屏 ， 将  ref={rootRef} 写在那个组件上即可 */}
        

          {/* 全屏的时候显示 退出全屏按钮，非全屏的时候显示 全屏按钮 */}
          {
            isFullScreen
              ?
              退出全屏
              :
              全屏
          }
        

      
    )
  }
}

export default FullScreen;

也可以通过码云下载代码，直接运行

https://gitee.com/m_eve_admin/react-fullscreen