ReactJS中如何实现全屏切换、监听全屏事件并更新UI？

下面是一个简洁且兼容多浏览器的React解决方案，通过自定义Hook封装全屏逻辑，可满足你所有需求：

自定义Hook：useFullscreen #

这个Hook封装了跨浏览器的全屏API调用，以及状态监听逻辑：

import { useState, useEffect, useCallback } from 'react';

const useFullscreen = (targetRef) => {
  const [isFullscreen, setIsFullscreen] = useState(false);

  // 兼容不同浏览器的全屏API
  const fullscreenAPI = {
    request: element => {
      if (element.requestFullscreen) return element.requestFullscreen();
      if (element.webkitRequestFullscreen) return element.webkitRequestFullscreen();
      if (element.mozRequestFullScreen) return element.mozRequestFullScreen();
      if (element.msRequestFullscreen) return element.msRequestFullscreen();
      return Promise.reject(new Error('全屏API不被当前浏览器支持'));
    },
    exit: () => {
      if (document.exitFullscreen) return document.exitFullscreen();
      if (document.webkitExitFullscreen) return document.webkitExitFullscreen();
      if (document.mozCancelFullScreen) return document.mozCancelFullScreen();
      if (document.msExitFullscreen) return document.msExitFullscreen();
      return Promise.reject(new Error('全屏API不被当前浏览器支持'));
    },
    getElement: () => {
      return document.fullscreenElement || 
             document.webkitFullscreenElement || 
             document.mozFullScreenElement || 
             document.msFullscreenElement;
    },
    eventName: 'fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange'
  };

  // 更新全屏状态
  const updateFullscreenStatus = useCallback(() => {
    setIsFullscreen(!!fullscreenAPI.getElement());
  }, []);

  // 监听全屏状态变化
  useEffect(() => {
    const eventNames = fullscreenAPI.eventName.split(' ');
    eventNames.forEach(name => document.addEventListener(name, updateFullscreenStatus));
    
    return () => {
      eventNames.forEach(name => document.removeEventListener(name, updateFullscreenStatus));
    };
  }, [updateFullscreenStatus]);

  // 进入全屏
  const enterFullscreen = useCallback(async () => {
    if (!targetRef.current) return;
    try {
      await fullscreenAPI.request(targetRef.current);
    } catch (err) {
      console.error('进入全屏失败:', err);
    }
  }, [targetRef]);

  // 退出全屏
  const exitFullscreen = useCallback(async () => {
    try {
      await fullscreenAPI.exit();
    } catch (err) {
      console.error('退出全屏失败:', err);
    }
  }, []);

  // 切换全屏状态
  const toggleFullscreen = useCallback(() => {
    if (isFullscreen) {
      exitFullscreen();
    } else {
      enterFullscreen();
    }
  }, [isFullscreen, enterFullscreen, exitFullscreen]);

  return {
    isFullscreen,
    enterFullscreen,
    exitFullscreen,
    toggleFullscreen
  };
};

export default useFullscreen;

组件使用示例 #

在你的React组件中，通过Ref指定目标元素，使用Hook提供的方法和状态：

import { useRef } from 'react';
import useFullscreen from './useFullscreen';

function FullscreenDemo() {
  const contentRef = useRef(null);
  const { isFullscreen, toggleFullscreen } = useFullscreen(contentRef);

  return (
    <div>
      <button onClick={toggleFullscreen}>
        {isFullscreen ? '退出全屏' : '进入全屏'}
      </button>
      
      <div ref={contentRef} style={{ width: '80%', margin: '20px auto', padding: '20px', backgroundColor: '#f0f0f0' }}>
        <h2>{isFullscreen ? '当前处于全屏模式' : '点击按钮切换全屏'}</h2>
        <p>这是需要控制全屏的内容区域</p>
      </div>
    </div>
  );
}

export default FullscreenDemo;

方案说明 #

• 跨浏览器兼容：Hook内部处理了不同浏览器的API前缀（webkit、moz、ms），覆盖主流桌面和移动浏览器。
• 状态自动同步：通过监听全屏变化事件，无论用户是通过按钮、ESC键还是手机返回键切换全屏，isFullscreen状态都会自动更新，确保UI同步。
• 简洁易用：自定义Hook封装了所有复杂逻辑，组件中只需通过Ref指定目标元素，调用方法即可实现功能。
• 错误处理：对API调用失败的情况添加了错误捕获，避免程序崩溃。

内容的提问来源于stack exchange，提问作者cavpollo