利用React显示全屏，实现F11的效果。
是不是听上去很傻，明明可以按F11解决的事，非要求添加一个按钮控制。
话不多说，代码走起！
首先利用React生命周期，在页面渲染前监控屏幕大小。当document.body.scrollHeight === window.screen.height 或者 document.body.scrollWidth === window.screen.width 的时候表示页面处于全屏状态，此时图标变为退回全屏，反之则是全屏图标。
因为有的浏览器不支持全屏模式，所以在此之前设置一个函数 检测当前浏览器是否支持全屏，如果支持则显示全屏按钮。反之，不显示。

import React, { Component } from "react";
import { Button } from "antd";
import { judgeIsSupportFull, fullScreen, fullExit } from "../FullScreen/index";
export default class FullScree extends Component {
  state = {
    isSupportFull: false,
    isFull: false
  };
  componentDidMount() {
    window.addEventListener("resize", this.changeFullStatus);
    this.judgeIsSupportFull();
  }
  componentWillUnmount() {
    window.removeEventListener("resize", this.changeFullStatus);
  }
  // 判断当前浏览器是否支持全屏API
  judgeIsSupportFull = () => {
    let isSupportFull = judgeIsSupportFull();
    this.setState({ isSupportFull });
  };
  // 计算当前是否处于全屏
  changeFullStatus = () => {
    // 判断网页的高度或者宽度是否等于屏幕对应大小
    // true: 当前处于全屏状态
    // false: 当前不处于全屏状态
    if (
      document.body.scrollHeight === window.screen.height ||
      document.body.scrollWidth === window.screen.width
    ) {
      this.setState({ isFull: true });
    } else {
      this.setState({ isFull: false });
    }
  };
  // click button
  handClick = () => {
    this.state.isFull ? fullExit() : fullScreen();
  };
  // ============================================================
  render() {
    let { isSupportFull } = this.state;

    if (!isSupportFull) {
      return null;
    }

    return (
      <Button
        style={{ border: "none", color: "#696969" }}
        onClick={this.handClick}
        shape="circle"
        icon={this.state.isFull ? "shrink" : "arrows-alt"}
      />
    );
  }
}

export const judgeIsSupportFull = () => {
  let result = false;
  let element = document.documentElement;
  //IE 10及以下ActiveXObject
  if (window.ActiveXObject) {
    result = true;
  }
  //HTML W3C 提议
  else if (element.requestFullScreen) {
    result = true;
  }
  //IE11
  else if (element.msRequestFullscreen) {
    result = true;
  }
  // Webkit (works in Safari5.1 and Chrome 15)
  else if (element.webkitRequestFullScreen) {
    result = true;
  }
  // Firefox (works in nightly)
  else if (element.mozRequestFullScreen) {
    result = true;
  }

  return result;
};
//显示全屏
export const fullScreen = () => {
  let element = document.documentElement;
  //IE 10及以下ActiveXObject
  if (window.ActiveXObject) {
    console.log("IE 10及以下ActiveXObject");
    let WsShell = new ActiveXObject("WScript.Shell");
    WsShell.SendKeys("{F11}");
  }
  //HTML W3C 提议
  else if (element.requestFullScreen) {
    console.log("HTML W3C 提议");
    element.requestFullScreen();
  }
  //IE11
  else if (element.msRequestFullscreen) {
    console.log("IE11");
    element.msRequestFullscreen();
  }
  // Webkit (works in Safari5.1 and Chrome 15)
  else if (element.webkitRequestFullScreen) {
    console.log("Webkit");
    element.webkitRequestFullScreen();
  }
  // Firefox (works in nightly)
  else if (element.mozRequestFullScreen) {
    console.log("Firefox");
    element.mozRequestFullScreen();
  }
};
//退出全屏
export const fullExit = () => {
  var element = document.documentElement;
  //IE ActiveXObject
  if (window.ActiveXObject) {
    var WsShell = new ActiveXObject("WScript.Shell");
    WsShell.SendKeys("{F11}");
  }
  //HTML5 W3C 提议
  else if (element.requestFullScreen) {
    document.exitFullscreen();
  }
  //IE 11
  else if (element.msRequestFullscreen) {
    document.msExitFullscreen();
  }
  // Webkit (works in Safari5.1 and Chrome 15)
  else if (element.webkitRequestFullScreen) {
    document.webkitCancelFullScreen();
  }
  // Firefox (works in nightly)
  else if (element.mozRequestFullScreen) {
    document.mozCancelFullScreen();
  }
};