// icon 定義
const [fullScreenIcon, setFullScreenIcon] = useState('quanping');

// 切換 icon
  const toggleFullscreenIcon = () => {
    if (document.fullscreenElement) {
      setFullScreenIcon('tuichuquanping');
    } else {
      setFullScreenIcon('quanping');
    }
  };

// 切換功能
const fullScreen = () => {
  if (!document.fullscreenElement) {
    // 開啟全屏
    const element = document.documentElement;
    // 兼容主流瀏覽器
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  } else {
    // 退出全屏
    document.exitFullscreen && document.exitFullscreen();
  }
};

// 監(jiān)聽全屏
  document.addEventListener('fullscreenchange', toggleFullscreenIcon);

// dom 應(yīng)用
<Icon name={fullScreenIcon}  onClick={fullScreen} />