React hooks 实现全屏

import React, { useState, useEffect } from 'react';
import { Button} from '组件库';

const FullscreenBtn = () => {
  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);

  useEffect(() => {
//  监听页面信息 
    const handleChangeIsFullscreen = () => {
      setIsFullscreen(!!document.fullscreenElement);
    };
    document.addEventListener('fullscreenchange', handleChangeIsFullscreen);
    return () => {
      document.removeEventListener('fullscreenchange', handleChangeIsFullscreen);
    };
  }, []);

  // 全屏事件
  const handleFullscreen = () => {
    document.getElementById('fullScreenID')?.requestFullscreen();
  };

  // 退出全屏事件
  const handleExitFullscreen = () => {
    document.exitFullscreen();
  };

  return (
<div id='fullScreenID'>
    <Button
      onClick={isFullscreen ? handleExitFullscreen : handleFullscreen}
    >
      {isFullscreen ?'退出全屏'：'全屏'}
    </Button>
</div>
  );
};

export default FullscreenBtn;

MDN : Element.requestFullscreen() - Web API 接口参考 | MDN