react + antd：全屏和退出全屏

完整代码：

export default () => {
  const [fullScreen, setFullScreen] = useState(false);

  // 将id对应的元素开启全屏
  const requestFullScreen = (id) => {
	const element = document.getElementById(id);
	const requestMethod = 		// 适应不同浏览器
	  element.requestFullscreen ||
	  element.webkitRequestFullscreen ||
	  element.msRequestFullscreen ||
	  element.mozRequestFullScreen;
	if (requestMethod){
	  requestMethod.call(element);	// .call()使调用requestMethod方法时this指向的对象是element
	}
  }

  // 退出全屏
  const exitFullScreen = () => {
  	const exitMethod = 
  	  document.exitFullscreen ||
	  document.webkitExitFullscreen ||
	  document.msExitFullscreen ||
	  document.mozCancelFullScreen;
	if (exitMethod){
	  exitMethod.call(element);
	}
  }

  // 判断id对应的元素是否全屏
  const isFullScreenElement = (id) => {
	const fullScreenElement = 
	  document.fullscreenElement ||
	  document.webkitFullscreenElement ||
	  document.msFullscreenElement ||
	  document.mozFullScreenElement;
	
	if (fullScreenElement){
	  return fullScreenElement.id === id;
	}
	return !!fullScreenElement;
  }
  
  const handleChangeScreen = () => {
	if (isFullScreenElement('element-id')){
	  exitFullScreen();
	  setFullScreen(false);
	  message.config({		// message放置消息的容器
	  	getContainer: () => document.body,
	  })
	} else {
	  requestFullScreen();
	  setFullScreen(true);
	  message.config({
	  	getContainer: () => document.getElementById('element-id'),
	  })
	}
  }
  
  return (
  	<Button 
	  onClick={handleChangeScreen}
	  icon={!fullScreen ? <ExpandOUtlined /> : <CompressOutlines />}
    />
  )
}

也可以使用第三方库 screenfull：

import screenfull from 'screenfull';

screenfull.request(document.getElementById('element-id'));
screenfull.exit();
screenfull.toggle();	// 切换全屏