react hooks 全屏按钮功能

import { useState } from "react";

function FullScreen() {
  const [fullScreen, setFullScreen] = useState<boolean>(false);

  
  
  const onFull = () => {
    if(!fullScreen){
      var de = document.documentElement;
        if (de.requestFullscreen) {
            de.requestFullscreen();
        }  
    }else{
      document.exitFullscreen();
    }
    setFullScreen(!fullScreen)
  }
  

  return (
    <div
    id = "fullScreen"
      style={{ padding: "0 5px", cursor: "pointer" }}
      onClick={() => onFull()}
    >
      {!fullScreen ?<i className="iconfont icon-quanping_o"></i>:<i className="iconfont icon-quxiaoquanping_o"></i>}
      
    </div>
  );
}
export default FullScreen;