react如何实现在网页中全屏操作？

1、utils.ts文件

var document: any = window.document;
// 展开/全屏
export function requestFullScreen(element: any) {
  var requestMethod = element.requestFullscreen || element.webkitRequestFullscreen || element.msRequestFullscreen || element.mozRequestFullScreen;
  if (requestMethod) {
    requestMethod.call(element);
  }
}
// 退出/全屏
export function exitFullScreen() {
  var exitMethod = document.exitFullscreen || document.webkitExitFullscreen || document.msExitFullscreen || document.mozCancelFullScreen;
  if (exitMethod) {
    exitMethod.call(document);
  }
}
// 判断是否全屏
export function isFullscreenElement() {
  var isFull = document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || document.mozFullScreenElement;
  return !!isFull;
}

2、index.tsx

// 引入utils
import { requestFullScreen, exitFullScreen, isFullscreenElement } from "utils/utils";

  const [fullScreen, setFullScreen] = useState(false);
  const [originResizeFunc, setOriginResizeFunc] = useState<any>(null);
  
  useEffect(() => {
    props.getMenu();
    setActiveKey(panes[0].key);
    // 监听 键盘ESC 退出全屏(可以使用屏幕大小监听，触发对应的事件)
    if (window.addEventListener) {
      window.addEventListener("resize", onEscCancelFull, false);
    } else {
      setOriginResizeFunc(window.onresize);
      window.onresize = onEscCancelFull;
    }
    // 销毁清除事件
    return () => {
      if (window.removeEventListener) {
        window.removeEventListener("resize", onEscCancelFull, false);
      } else {
        window.onresize = originResizeFunc;
      }
    };
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
  function onEscCancelFull() {
  	// 用于反显状态
    setFullScreen(isFullscreenElement());
  }
  
// Node部分
return (
		  {fullScreen ? (<FullscreenExitOutlined onClick={
		  	() => {
		  		exitFullScreen();
		  	}} style={{ fontSize: "24px", marginRight: "10px" }} />) 
		  	: (<FullscreenOutlined onClick={
		    () => {
		  		requestFullScreen(document.body);
		 	}} style={{ fontSize: "24px", marginRight: "10px" }} />)
		  }
	   )

3、呈现效果