react 实现组件全屏

傷城~ 2023-02-25 10:11 42阅读 0赞

在浏览器中访问页面，需要对页面中的其中一个组件能够实现全屏展示

实现效果

![20200712140516612.gif][]

直接复制下面代码到项目中即可使用

import React, { Component } from 'react';
    
    const rootRef = React.createRef();
    
    class FullScreen extends Component {
      constructor(props) {
        super(props);
        this.state = {
          isFullScreen: false
        }
      }
      componentDidMount() {
        // 监听页面全屏事件
        window.onresize = () => {
          // 全屏
          if (document.fullscreenElement) {
            this.setState({ isFullScreen: true });
          }
          // 不是全屏
          else {
            this.setState({ isFullScreen: false });
          }
        }
      }
    
      // 全屏
      fullScreen = () => {
        if (!this.state.isFullScreen) {
          rootRef.current.requestFullscreen();
        }
      }
    
      // 退出全屏
      exitFullScreen = () => {
        document.exitFullscreen();
      }
    
      render() {
        const { isFullScreen } = this.state;
        return (
          <div>
            {/* 哪一个组件想要实现 全屏 ， 将  ref={rootRef} 写在那个组件上即可 */}
            <div ref={rootRef} style={
       { width: 200, height: 200, background: '#6ebda4' }}>
              {/* 全屏的时候显示 退出全屏按钮，非全屏的时候显示 全屏按钮 */}
              {
                isFullScreen
                  ?
                  <button onClick={this.exitFullScreen}>退出全屏</button>
                  :
                  <button onClick={this.fullScreen}>全屏</button>
              }
            </div>
    
          </div>
        )
      }
    }
    
    export default FullScreen;

也可以通过码云下载代码，直接运行

[https://gitee.com/m\_eve\_admin/react-fullscreen][https_gitee.com_m_eve_admin_react-fullscreen]

[20200712140516612.gif]: /images/20230209/0523f25d2b574786b23e8de6eb7f12f5.png
[https_gitee.com_m_eve_admin_react-fullscreen]: https://gitee.com/m_eve_admin/react-fullscreen