React实现全屏和退出全屏

React实现全屏和退出全屏

关键代码：
元素.exitFullscreen(); //退出全屏
document.requestFullscreen()   //实现全屏

import React, { useState } from 'react';
import { Button} from 'antd';
import './Top.css'
const Top = (props) => {
    // 全屏展示
    const [full, setFull] = useState(false);    //创建管理是否全屏状态
    const [scre, setScre] = useState('全屏');   //按钮文字
    let fullScreenHandle = () => {
        let app = document.querySelector('.App')//获取App
        if (!full) {
            setScre('退出全屏')
            setFull(true);
            app.requestFullscreen()   //实现全屏
        } else {
            setScre('全屏')
            setFull(false);
            document.exitFullscreen(); //退出全屏
        }
    }
    return (
        <div className="top">
            <Button
                className="screen"
                onClick={() => { fullScreenHandle() }}
            >
                {scre}
            </Button>
        </div>
    );
}
export default Top;