React全屏显示

import React from 'react';
import { Tooltip } from 'antd';
import {
  FullscreenOutlined,
  FullscreenExitOutlined
} from '@ant-design/icons';
class FullScreen extends React.Component{
	state={
		isFullScreen: true
	};
	//调用事件
    fullScreen = () => {
        let isFullScreen = document.webkitIsFullScreen
          if (!isFullScreen) {
            this.requestFullScreen();
          } else {
            this.exitFullscreen();
          }
          this.setState({isFullScreen:isFullScreen})
     };
     //进入全屏
     requestFullScreen = () => {
          var de = document.documentElement;
          if (de.requestFullscreen) {
            de.requestFullscreen();
          } else if (de.mozRequestFullScreen) {
            de.mozRequestFullScreen();
          } else if (de.webkitRequestFullScreen) {
            de.webkitRequestFullScreen();
          }else if (de.msRequestFullscreen) {
            de.webkitRequestFullScreen();
          }
      };
      //退出全屏
      exitFullscreen = () => {
        var de = document;
          if (de.exitFullScreen) {
            de.exitFullScreen();
          } else if (de.mozExitFullScreen) {
            de.mozExitFullScreen();
          } else if (de.webkitExitFullscreen) {
            de.webkitExitFullscreen();
          }else if (de.msExitFullscreen) {
            de.msExitFullscreen();
          }
      };
      render(){
		return(
            <Tooltip placement="bottom" title={<span>全屏</span>}>
                {React.createElement(
                    this.state.isFullScreen ? FullscreenOutlined : FullscreenExitOutlined, 
                        {
                            onClick: this.fullScreen
                        }
                    )
                }
            </Tooltip>
		)
	 }
}
export default FullScreen;