怎么用React實(shí)現(xiàn)組件全屏化

這篇文章主要介紹“怎么用React實(shí)現(xiàn)組件全屏化”，在日常操作中，相信很多人在怎么用React實(shí)現(xiàn)組件全屏化問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用React實(shí)現(xiàn)組件全屏化”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

介紹

起因是開發(fā)今天給我提了一個(gè)sql編輯器輸入框比較小，不支持放大，不太方便。希望能夠全屏顯示，聯(lián)想到自己以后可能也會(huì)需要，便研究并記錄之。

其實(shí)我覺得也沒有很?。╫rz）

全屏

大家應(yīng)該都在web頁面里面見過全屏按鈕，點(diǎn)擊它以后頁面就成了全屏，經(jīng)常會(huì)在代碼編輯器中出現(xiàn)。

上圖就是leetcode全屏后的效果了，省略了菜單等內(nèi)容。

看起來全屏展示分為很多種，我說說我的看法。

• leetcode這種 它只是頁面全屏

• F11 我們可以按F11進(jìn)入全屏模式，是chrome自帶的，不需要修改代碼

• 改變dom，其實(shí)和第一種一樣，只不過會(huì)隱藏瀏覽器部分內(nèi)容

如上圖一樣，瀏覽器的軀殼已經(jīng)不見了。

全屏的用處

全屏的話，似乎當(dāng)你希望全身心投入閱讀的時(shí)候比較需要，就好像大家看電影也喜歡全屏一樣。主要還是放大組件，讓大量輸入/閱讀操作能夠更愉快♀地進(jìn)行。

安裝react-full-screen

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

使用yarn或者npm安裝這個(gè)庫。官網(wǎng)提供了一些demo，鏈接在此。

編寫一個(gè)最簡(jiǎn)單的組件

這里就直接上代碼了，代碼不多，很好懂。

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的時(shí)候高度為200，非full高度為100
  const [full, setFull] = useState(false);
  // 創(chuàng)建一個(gè)fullScreen的handle
  const handle = useFullScreenHandle();

  return (
    <div style={{ background: "#ececec", height: 500 }}>
      <Row gutter={[8, 8]}>
        <Col span={8}>
          <Card style={{ height: 500 }}>左側(cè)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={() => {
                      // 點(diǎn)擊設(shè)置full為true，接著調(diào)用handle的enter方法，進(jìn)入全屏模式
                      setFull(true);
                      handle.enter();
                    }}
                  />
                </Tooltip>
                <Tooltip title="退出全屏">
                  <FullscreenExitOutlined
                    style={{ fontSize: 16, marginLeft: 16 }}
                    // 退出全屏模式并把full設(shè)置為false
                    onClick={() => {
                      setFull(false);
                      handle.exit();
                    }}
                  />
                </Tooltip>
              </div>
              <div>假設(shè)這是一個(gè)編輯器</div>
            </Card>
          </FullScreen>
        </Col>
      </Row>
    </div>
  );
};

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

展示出來是這個(gè)樣子，代碼里面加入了注釋，大家對(duì)著看即可。由于codesandbox里面不太支持，所以我放到了一個(gè)antd pro的項(xiàng)目里面，給大家看看效果。

這樣，我們做到了只放大編輯器的效果，隱藏掉了其他不重要的部分（左側(cè)部分）。

存在的問題

這樣還遠(yuǎn)遠(yuǎn)不夠，里面還有一些細(xì)節(jié)要優(yōu)化。

• 默認(rèn)背景為黑色，不友好，我們需要設(shè)置樣式

• 我們應(yīng)該在全屏模式把編輯器高度變大

• 還有暗坑，待會(huì)再說

各個(gè)擊破

背景色

我們使用的這個(gè)庫，會(huì)默認(rèn)包裹一個(gè)全局的div，當(dāng)全屏的時(shí)候，class為.fullscreen.fullscreen-enabled，而非全屏的時(shí)候則為fullscreen。

所以我們?cè)谌?組件的樣式里面寫如下的css即可:

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

可以看到這個(gè)樣式已經(jīng)生效了，而且我們加入了padding，這樣看起來Card就不會(huì)被擠到邊上。

高度

我們之前設(shè)置了full變量，所以我們修改一下代碼，根據(jù)full來判斷高度。

可以看到盒子的高度已經(jīng)發(fā)生了變化。

擴(kuò)展部分

如果你以為這就結(jié)束了，那就大錯(cuò)特錯(cuò)了。接下來我們說一說暗坑。

在antd組件里面，modal/drawer/message等等都是在body中生成的dom元素，所以我們會(huì)遇到什么問題呢？

在全屏模式根本就看不到對(duì)話框/消息提示等。

但好在antd提供了對(duì)應(yīng)的參數(shù)，控制dom的掛載元素。

Modal

modal可以這么解決，我們首先設(shè)置一個(gè)full_screen的id:

注意，這個(gè)id一定要在FullScreen組件里面。

接著我們?cè)贛odal.info,Modal組件里面都加入如下參數(shù):

注意: 這里的modal我的demo里面并沒有寫，這個(gè)屬于擴(kuò)展部分。寫一個(gè)modal組件也不復(fù)雜，大家可以自己嘗試下。

Modal.info這樣的api

Modal.info({
  title: 'cud請(qǐng)求參數(shù)',
  width: 800,
  // 注意加上這個(gè)
  getContainer: document.getElementById('full_screen')
  }）

message

通過message.config傳入getContainer方法:

這里我沒找到很好的辦法，每次message.info的時(shí)候都需要config一下，還是比較麻煩的。如果作為全局配置則又可能出問題，大家有更好的辦法可以留言哈。

到此，關(guān)于“怎么用React實(shí)現(xiàn)組件全屏化”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！