React 实现页面展开全屏与退出全屏效果

import React, { Component } from 'react';

import styled from 'styled-components';

import { Icon } from 'antd';

import fullScreen from '../../images/fullScreen.svg'     //引入图片svg

import closeFullScreen from '../../images/closeFullScreen.svg'      //引入图片svg

//css样式

const Ct = styled.div`

  display: flex;

  align-items: center;

  position: relative;

  height: 100%;

  cursor:pointer;

`;

class FullScreen extends Component {

    state = {

        isFullScreen: false   //有一个控制全屏和退出全屏的变量

    }

    componentDidMount = () => {

        this.watchFullScreen()

    }

 

    fullScreen = () => {

        console.log('fullscreen:', this.state.isFullScreen);

        if (!this.state.isFullScreen) {<