React全屏方法

最新推荐文章于 2025-02-05 15:52:41 发布

X-Rich

最新推荐文章于 2025-02-05 15:52:41 发布

阅读量660

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/qq_64156125/article/details/130100991

版权

// 定义组件
const AdminView: React.FC = () => {
  // 定义全屏状态
  const [isFullscreen, setIsFullscreen] = useState(false);
  // 定义全屏方法
  const handleFullscreen = () => {
    if (!isFullscreen) {
      // 进入全屏状态
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      }
    }
    else {
      // 退出全屏状态
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }
    }

    // 更新全屏状态
    setIsFullscreen(!isFullscreen);
  };



    <div className="item">
        <div onClick={handleFullscreen}> 
            {isFullscreen ? '退出全屏' : '进入全屏'}             
        </div>
    </div>