react 组件全屏展示 RequestFullScreenreact全屏组件，记录下。这是一个混字数的摘要，这是一个混

react通过RequestFullScreen实现组件全屏效果，记录一下
export default class TEST extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFull: false, // 是否全屏
    }
  }

  fullele = () => (
     document.fullscreenElement ||
         document.webkitFullscreenElement ||
         document.msFullscreenElement ||
         document.mozFullScreenElement ||
         null)

  // 判断是否退出全屏
  isfull = () => !!(document.webkitIsFullScreen || this.fullele())

  componentDidMount() {
    const that = this;
    window.onresize = function () { // 退出全屏的方式太多了，esc、F11、鼠标点击关闭..这里需要监听一下，手动调用退出全屏方法
    if (!that.isfull()) {
        that.exitFullscreen()
    }
   }
  }

  // 全屏
  openFullscreen = () => {
    /* 获取(<html>)元素以全屏显示页面 */
    const full = document.getElementById('screen-config-box') // 指定某个元素全屏
    let flag = true;
    if (full.RequestFullScreen) {
      full.RequestFullScreen()
      // 兼容Firefox
    } else if (full.mozRequestFullScreen) {
      full.mozRequestFullScreen()
      // 兼容Chrome, Safari and Opera等
    } else if (full.webkitRequestFullScreen) {
      full.webkitRequestFullScreen()
      // 兼容IE/Edge
    } else if (full.msRequestFullscreen) {
      full.msRequestFullscreen()
    } else {
      flag = false
    }
    this.setState({
      isFull: flag
    })
  }

  // 退出全屏
  exitFullscreen = () => {
    const { isFull } = this.state;
    if (!isFull) { // 上面监听退出全屏会调用这里好几次，这里限制一下，防止多次渲染
      return
    }
    let flag = false;
    if (document.exitFullScreen) {
      document.exitFullScreen();
      // 兼容Firefox
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
      // 兼容Chrome, Safari and Opera等
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
      // 兼容IE/Edge
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else {
      flag = true
    }
    this.setState({
      isFull: flag
    })
  }

  render() {
    const { isFull, visible } = this.state;
    return (
        <div id="screen-config-box" className="screen-config-box">
             {
               isFull ? <Button type="primary" icon="fullscreen-exit" onClick={this.exitFullscreen}>
               退出全屏
               </Button> : <Button type="primary" icon="fullscreen" onClick={this.openFullscreen}>
               展开全屏
               </Button>
             }
       </div>
     )
  }
}