react 实现页面（组件）全屏显示

//设置初始state
constructor(props){
        super(props);
        this.state={
            isFullScreen: false
        }
        this.fullScreen=this.fullScreen.bind(this);//全屏显示
        this.requestFullScreen=this.requestFullScreen.bind(this);//进入全屏
        this.exitFullscreen=this.exitFullscreen.bind(this);//退出全屏
        this.watchFullScreen=this.watchFullScreen.bind(this);//监听fullScreen事件
}

 fullScreen(){
        let isFullScreen=this.state.isFullScreen;
        if (!this.state.isFullScreen) {
            this.requestFullScreen();
        } else {
            this.exitFullscreen();
        }
        this.setState({
            isFullScreen:!isFullScreen
        })
    };
    requestFullScreen(){
        var dom = document.getElementById('monitorDataFlowContainer');//绑定想要全屏的组件
        if (dom.requestFullscreen) {
            dom.requestFullscreen();
        } else if (dom.mozRequestFullScreen) {
            dom.mozRequestFullScreen();
        } else if (dom.webkitRequestFullScreen) {
            dom.webkitRequestFullScreen();
        }
    };
    exitFullscreen(){
        var dom = document;
            if (dom.exitFullscreen) {
                dom.exitFullscreen();
            } else if (dom.mozCancelFullScreen) {
                dom.mozCancelFullScreen();
            } else if (dom.webkitCancelFullScreen) {
                dom.webkitCancelFullScreen();
            }
    };
//监听作用
    watchFullScreen(){
        console.log(document.webkitIsFullScreen)
        const _self = this;
        document.addEventListener(
            "webkitfullscreenchange",
            function() {
                _self.setState({
                    isFullScreen: document.webkitIsFullScreen
                });
            },
            false
        );
    };