React中设置body全屏时隐藏指定元素的实现方法

要搞定React项目里点击ItemsPage的全屏按钮后，隐藏<First/>、<TopComponent/>、<NavBar/>这些组件的需求，咱们可以通过监听全屏状态变化+控制组件显隐的方式来实现，下面是两种实用的方案：

方案一：React状态+条件渲染（推荐） #

这种方式通过顶层组件维护全屏状态，直接控制组件的显示与隐藏，逻辑清晰，适合大多数React项目。

1. 改造主应用组件 #

在你的主应用组件中添加状态管理和全屏事件监听：

class App extends React.Component {
  state = {
    isFullscreen: false
  };

  componentDidMount() {
    // 监听全屏状态变化——用户可能用ESC键退出全屏，所以必须监听这个事件
    document.addEventListener('fullscreenchange', this.updateFullscreenState);
    // 兼容不同浏览器的前缀
    document.addEventListener('webkitfullscreenchange', this.updateFullscreenState);
    document.addEventListener('mozfullscreenchange', this.updateFullscreenState);
  }

  componentWillUnmount() {
    // 组件卸载时移除监听，避免内存泄漏
    document.removeEventListener('fullscreenchange', this.updateFullscreenState);
    document.removeEventListener('webkitfullscreenchange', this.updateFullscreenState);
    document.removeEventListener('mozfullscreenchange', this.updateFullscreenState);
  }

  updateFullscreenState = () => {
    // 判断当前是否处于全屏模式，更新状态
    const isFull = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement);
    this.setState({ isFullscreen: isFull });
  };

  // 封装全屏请求方法，传给ItemsPage使用
  triggerFullscreen = () => {
    const elem = document.body;
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    }
  };

  render() {
    const { isFullscreen } = this.state;
    return (
      <>
        {/* 非全屏时显示，全屏时隐藏 */}
        {!isFullscreen && <First />}
        {!isFullscreen && <TopComponent />}
        <Switch>
          <Route>
            <div style={{ display: 'flex' }}>
              {/* 同样，全屏时隐藏NavBar */}
              {!isFullscreen && <NavBar />}
              <div className="content">
                <Switch>
                  <Route 
                    exact path="/" 
                    render={() => this.render_items({ triggerFullscreen: this.triggerFullscreen })} 
                  />
                </Switch>
              </div>
            </div>
          </Route>
        </Switch>
      </>
    );
  }
}

2. 调整ItemsPage组件 #

把全屏触发方法改为使用父组件传递过来的函数：

class ItemsPage extends React.PureComponent {
  render = () => {
    const { triggerFullscreen } = this.props;
    return (
      <button onClick={triggerFullscreen}>fullscreenbtn</button>
    );
  };
}

方案二：CSS类控制显隐 #

如果你的项目更倾向于用样式来控制，也可以给body添加全屏类，通过CSS隐藏指定组件：

1. 主应用组件添加类切换逻辑 #

updateFullscreenState = () => {
  const isFull = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement);
  // 给body添加/移除全屏类
  document.body.classList.toggle('is-fullscreen', isFull);
};

2. 添加CSS样式 #

/* 全屏模式下隐藏指定组件 */
body.is-fullscreen .first-comp,
body.is-fullscreen .top-comp,
body.is-fullscreen .nav-bar {
  display: none !important;
}

3. 给组件添加对应类名 #

<First className="first-comp" />
<TopComponent className="top-comp" />
<NavBar className="nav-bar" />

Hook版本（函数组件） #

如果你的项目用的是函数组件，用useState和useEffect也能轻松实现：

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

function App() {
  const [isFullscreen, setIsFullscreen] = useState(false);

  useEffect(() => {
    const handleFullscreenChange = () => {
      const isFull = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement);
      setIsFullscreen(isFull);
      document.body.classList.toggle('is-fullscreen', isFull);
    };

    // 添加多浏览器兼容的事件监听
    const events = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange'];
    events.forEach(evt => document.addEventListener(evt, handleFullscreenChange));

    // 清理函数
    return () => {
      events.forEach(evt => document.removeEventListener(evt, handleFullscreenChange));
    };
  }, []);

  const triggerFullscreen = () => {
    const elem = document.body;
    if (elem.requestFullscreen) elem.requestFullscreen();
    else if (elem.webkitRequestFullscreen) elem.webkitRequestFullscreen();
    else if (elem.mozRequestFullScreen) elem.mozRequestFullScreen();
  };

  return (
    <>
      {!isFullscreen && <First />}
      {!isFullscreen && <TopComponent />}
      <Switch>
        <Route>
          <div style={{ display: 'flex' }}>
            {!isFullscreen && <NavBar />}
            <div className="content">
              <Switch>
                <Route exact path="/" render={() => <ItemsPage triggerFullscreen={triggerFullscreen} />} />
              </Switch>
            </div>
          </div>
        </Route>
      </Switch>
    </>
  );
}

这两种方案都能完美实现需求：不管是通过按钮触发全屏，还是用户按ESC退出全屏，指定组件都会自动显示/隐藏。

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