React实现组件全屏化的操作方法

// yarn add react-full-screen
npm install react-full-screen --save

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons";
import { Tooltip, Card, Col, Row } from "antd";
import { FullScreen, useFullScreenHandle } from "react-full-screen";

const App = () => {
  // 定义full变量，为的是兼容全屏和非全屏的样式，比如full的时候高度为200，非full高度为100
  const [full, setFull] = useState(false);
  // 创建一个fullScreen的handle
  const handle = useFullScreenHandle();

  return (
    <div style={{ background: "#ececec", height: 500 }}>
      <Row gutter={[8, 8]}>
        <Col span={8}>
          <Card style={{ height: 500 }}>左侧card</Card>
        </Col>
        <Col span={16}>
          <FullScreen
            handle={handle}
            onChange={setFull}
            style={{ background: "#ffffff" }}
          >
            <Card style={{ height: 500 }}>
              <div>
                <Tooltip title="全屏">
                  <FullscreenOutlined
                    style={{ fontSize: 16 }}
                    onClick={() => {
                      // 点击设置full为true，接着调用handle的enter方法，进入全屏模式
                      setFull(true);
                      handle.enter();
                    }}
                  />
                </Tooltip>
                <Tooltip title="退出全屏">
                  <FullscreenExitOutlined
                    style={{ fontSize: 16, marginLeft: 16 }}
                    // 退出全屏模式并把full设置为false
                    onClick={() => {
                      setFull(false);
                      handle.exit();
                    }}
                  />
                </Tooltip>
              </div>
              <div>假设这是一个编辑器</div>
            </Card>
          </FullScreen>
        </Col>
      </Row>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));

.fullscreen.fullscreen-enabled {
  background: #fff;
  padding: 24px;
}

Modal.info({
  title: 'cud请求参数',
  width: 800,
  // 注意加上这个
  getContainer: document.getElementById('full_screen')
  }）