Reactコンポーネントをフルスクリーンにする方法

// yarn を追加して react-full-screen
npm インストール react-full-screen --save

React をインポートし、{useState} を "react" から取得します。
「react-dom」からReactDOMをインポートします。
"antd/dist/antd.css"をインポートします。
「./index.css」をインポートします。
"@ant-design/icons" から { FullscreenOutlined、FullscreenExitOutlined } をインポートします。
"antd" から { Tooltip、Card、Col、Row } をインポートします。
「react-full-screen」から FullScreen、useFullScreenHandle } をインポートします。

定数App = () => {
  // フルスクリーンと非フルスクリーンのスタイルと互換性のある full 変数を定義します。たとえば、full の高さは 200 で、非フルスクリーンの高さは 100 です。
  const [full, setFull] = useState(false);
  // フルスクリーンハンドルを作成する
  定数ハンドル = useFullScreenHandle();

  戻る （
    <div スタイル = {{ 背景: "#ececec", 高さ: 500 }}>
      <行間隔={[8, 8]}>
        <列スパン={8}>
          <Card style={{ height: 500 }}>左のカード</Card>
        </Col>
        <列スパン={16}>
          <フルスクリーン
            ハンドル={ハンドル}
            onChange={setFull}
            スタイル={{ 背景: "#ffffff" }}
          >
            <カードスタイル={{ 高さ: 500 }}>
              <div>
                <ツールチップタイトル="全画面">
                  <フルスクリーンアウトライン
                    スタイル={{ フォントサイズ: 16 }}
                    クリックすると{() => {
                      // クリックして full を true に設定し、ハンドルの enter メソッドを呼び出して全画面モードに入ります setFull(true);
                      ハンドルを入力します。
                    }}
                  />
                </ツールチップ>
                <Tooltip title="全画面表示を終了">
                  <全画面終了アウトライン
                    スタイル={{ フォントサイズ: 16, marginLeft: 16 }}
                    // フルスクリーンモードを終了し、full を false に設定する
                    クリックすると{() => {
                      設定Full(false);
                      ハンドルを終了します。
                    }}
                  />
                </ツールチップ>
              </div>
              <div>これはエディターであると仮定します</div>
            </カード>
          </フルスクリーン>
        </Col>
      </行>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("コンテナ")); 

.fullscreen.fullscreen-enabled {
  背景: #fff;
  パディング: 24px;
}

モーダル情報({
  タイトル: 「cud リクエスト パラメータ」、
  幅: 800,
  // getContainer の追加に注意してください: document.getElementById('full_screen')
  })