模態(tài)框是一個(gè)常見的組件，下面讓我們使用 React 實(shí)現(xiàn)一個(gè)現(xiàn)代化的模態(tài)框吧。

組件設(shè)計(jì)

模態(tài)框想必大家都很熟悉，是工作中常用的組件，可以讓我們填寫或展示一些信息而不必打開一個(gè)新頁面。在開始編碼之前，我們先來了解一個(gè) React 模態(tài)框組件應(yīng)該如何設(shè)計(jì)。

React 是一個(gè)狀態(tài)（數(shù)據(jù)）驅(qū)動(dòng)的前端框架，一個(gè)模態(tài)框最重要的狀態(tài)就是打開和關(guān)閉，visible，當(dāng) visible 為 true 時(shí)，模態(tài)框打開，反之亦然。

由于 React 所提倡的是一種聲明式，組件化的開發(fā)體驗(yàn)，每個(gè)組件都是 狀態(tài) => 界面 的映射，所以，我們把 visible 做為模態(tài)框組件的一個(gè) prop，通過傳入 prop 來控制

模態(tài)框的顯示和隱藏，同時(shí)該組件還接受一個(gè) onClose 的 prop，用來關(guān)閉模態(tài)框。

<Modal visible={modalVisble} onClose={this.onModalClose} />

一個(gè)完整的模態(tài)框還需要標(biāo)題和內(nèi)容，因此，我們還需要一個(gè) header 的 prop 來傳遞模態(tài)框的 header，并把 Modal 組件的 children 作為模態(tài)框的內(nèi)容 content。最后，我們的模態(tài)框 Modal 的調(diào)用方式是這樣的：

import React, { useEffect, useState } from 'react';
import Modal from './components/modal';

function App() {
 const [modalVisible, setModalVisible] = useState(true);
 const openModal = function() { setModalVisible(true) };
 const closeModal = function() { setModalVisible(false) };
 return (
  <>
   <button onClick={openModal}>Click</div>
   <Modal visible={modalVisible} onClose={closeModal} header="Create a modal">
    <p>This is my content</p>
   </Modal>
  </>
 );
}
export default App;

這里使用了 hooks，請(qǐng)升級(jí)到最新版本的 react 來體驗(yàn)。

實(shí)際上，一個(gè)完整的模態(tài)框組件還應(yīng)該提供一些額外的配置來方便用戶使用，比如 header 和 content 的自定義樣式 headerClassName，contentClassName，定制操作按鈕的 footer，控制是否顯示關(guān)閉按鈕的 showClose 等等，
但這里為了保持教程的簡單，這些簡單的配置就不一一實(shí)現(xiàn)了，如果感興趣可以自行練習(xí)。

確定了我們的模態(tài)框的調(diào)用方式，現(xiàn)在我們來總結(jié)一下完整的模態(tài)框應(yīng)該具備那些特性：

1. 模態(tài)框組件應(yīng)該掛載在 body 的第一層中，不要將模態(tài)框放置到父組件中，因?yàn)槟B(tài)框放置到父組件中很容易受到其他元素的干擾。
2. 模態(tài)框顯示后，模態(tài)框背后的背景不能隨著鼠標(biāo)滾輪而滾動(dòng)。
3. 點(diǎn)擊模態(tài)框的遮罩層后，應(yīng)該關(guān)閉模態(tài)框。

基礎(chǔ)功能

上面分析玩模態(tài)框的功能后，讓我們先開始實(shí)現(xiàn)一版最基礎(chǔ)的模態(tài)框。從 HTML 結(jié)構(gòu)上來講，模態(tài)框組件分為 overlay 遮罩層和 content 內(nèi)容兩部分組成，其中 content 里面還應(yīng)該分為 header, content, footer（這里我們沒有實(shí)現(xiàn)）三部分組成。
所以，模態(tài)框的最基本的結(jié)構(gòu)如下

import React, { PureComponent } from 'react';
class Modal extends PureComponent {
 render() {
  const { visible, onClose, header, children } = this.props;
  return (
   <div className={`overlay ${visible ? 'visible' : ''}`}>
    <div className="content">
     <div className="header">
      {header}
      <button onClick={onClose}>Close</button>
     </div>
     <div className="content">{children}</div>
    </div>
   </div>
  );
 }
}

由于 overlay 元素是模態(tài)框組件的最外層的容器，所以我們可以通過控制 overlay 的顯示和隱藏（在上面的基礎(chǔ)結(jié)構(gòu)中，通過 visible 屬性的值來給 overlay 添加或刪除類 'visible' 來控制 ）實(shí)現(xiàn)模態(tài)框的打開關(guān)閉效果。在這里我們使用 display 實(shí)現(xiàn)控制 overlay 的顯示和隱藏（這樣在關(guān)閉時(shí)并沒有刪除該模態(tài)框，方便下次打開可以保存內(nèi)容），同時(shí) overlay 還是一個(gè)占據(jù)整個(gè)窗口的半透明暗色背景，所以 overlay 的樣式應(yīng)該為

.overlay {
 display: none;
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 right: 0;
 background: rgba(0, 0, 0, 0.3);
 visibility: hidden;
}
.overlay.visible {
 display: block;
 visibility: visible;
}

然后就是 content 中元素的樣式，都很簡單，大家看一下就好了，可以根據(jù)自己的組件規(guī)范修改這些樣式。

.container {
 margin: 80px auto;
 width: 80%;
 min-height: 800px;
 background: #fff;
 border-radius: 4px;
}

.header {
 display: flex;
 justify-content: space-between;
 padding: 16px;
 font-size: 24px;
 border-bottom: 1px solid #d3d3d3;
}

.body {
 padding: 16px;
}

.closeBtn {
 outline: none;
 border: none;
 appearance: none;
 font-size: 18px;
 color: #d5d5d5;
 cursor: pointer;
}

這樣，我們最基礎(chǔ)的一版模態(tài)框就做好了，但是這個(gè)模態(tài)框是渲染在父組件中，那么如何才能將這個(gè)模態(tài)框放到 body 下，作為頂層元素呢？我們可以使用 Portal 這個(gè) React 新提供的功能。

使用 portal 將模態(tài)框送到 body 中

Portal 是 React 16 中的新功能，就像它的名稱傳送門一樣，這個(gè)功能的作用就是將組件的 DOM 嗖的一下傳送到另外一個(gè)地方，換句話說就是可以讓你的組件渲染到其他地方，而不僅僅是在父組件中。從上面的描述中，我們知道 Portal 是一個(gè)作用于 DOM 的功能，所以 Portal 就在 react-dom 這個(gè)包下，react-dom 提供了 createPortal 方法來創(chuàng)建 Portal，它的第一參數(shù)是 React 組件，第二個(gè)參數(shù)則是接收這個(gè)組件的 DOM 節(jié)點(diǎn)。

回到我們的模態(tài)框來，為了方便的使用 Portal，我們首先創(chuàng)建一個(gè) ModalPortal 組件，該組件會(huì)首先使用 createElement 創(chuàng)建一個(gè)表示 overlay 的 div，并使用 appendChild 將此 div 插入到 body 的末尾中，然后在 render 中，使用 createPortal 將 ModalPortal 接受的所有子組件送入 overlay 這個(gè) div 中。通過這種方式，我們就把模態(tài)框組件變成 body 中的頂層元素了。

由于 overlay 是手動(dòng)創(chuàng)建的 DOM 元素，所以當(dāng) visible 發(fā)生變化時(shí)，我們需要使用 DOM API 來控制 overlay 的顯示和隱藏，所以我們在 ModalPortal 組件的 componetDidMount 和 componetDidUpdate 兩個(gè)生命周期中，根據(jù) visible 的值來增刪 overlay 的 visible 類控制 overlay 的顯示/隱藏。

import React, { PureComponent } from 'react';
import { createPortal } from 'react-dom'
class ModalPortal extends PureComponent {
 constructor(props) {
  super(props);
  // createElement 是一個(gè)封裝后的函數(shù)，方便在創(chuàng)建元素時(shí)添加屬性
  this.node = createElement('div', {
   class: `modal-${random()} ${props.className}`,
  });
  document.body.appendChild(this.node);
 }

 componentDidMount() {
   this.checkIfVisible();
  }

 componentDidUpdate(prevProps) {
  if (prevProps.visible !== this.props.visible) {
   this.checkIfVisible();
  }
 }

 // 控制 overlay 的顯示隱藏
 checkIfVisible = () => {
  const { visible } = this.props;
  if (visible) {
   this.node.classList.add(styles.visible);
  } else {
   this.node.classList.remove(styles.visible);
  }
 };


 render() {
  const { children } = this.props;
  return createPortal(children, this.node);
 }
}

class Modal extends PureComponent {
 ...
 render() {
  return (
   <ModalPortal className='overlay' overlay={overlay}>
    ...
   </ModalPortal>
  )
 }
}

阻止背景滾動(dòng)

當(dāng)我們完成上面的編碼之后，我們的模態(tài)框就可以實(shí)現(xiàn)顯示/隱藏，并且處于 body 的頂層，但是還有一個(gè)問題，那就是如果 body 內(nèi)容太長出現(xiàn)滾動(dòng)時(shí)，滾動(dòng)鼠標(biāo)就會(huì)發(fā)現(xiàn)，模態(tài)框后邊的背景也在滾動(dòng)，這顯然不是我們希望的結(jié)果。如何應(yīng)對(duì)這種情況呢？

解決辦法很巧妙，就是在模態(tài)框打開時(shí)，我們給 body 添加一個(gè) overflow: hidden 的樣式讓 body 不滾動(dòng)，然后關(guān)閉模態(tài)框再去除這個(gè)屬性。通過這樣的方式，我們就是實(shí)現(xiàn)在模態(tài)框打開時(shí)背景不滾動(dòng)的功能了。
明白來原理之后就開始修改代碼了，我們首先在 constructor 中使用一個(gè)變量 savedBodyOverflow 來保持 body 原始的 overflow 值，然后修改 checkIfVisble 使之可以控制 overflow 類的增刪。

class ModalPortal extends PureComponent {
 constructor(props) {
  ...
  this.savedBodyOverflow = document.body.style.overflow;
 }
 ...
 checkIfVisible = () => {
  const { visible } = this.props;
  if (visible) {
   this.node.classList.add(styles.visible);
   document.body.style.overflow = 'hidden';
  } else {
   this.node.classList.remove(styles.visible);
   document.body.style.overflow = this.saveBodyOverflow;
  }
 }
}

點(diǎn)擊遮罩層關(guān)閉

點(diǎn)擊遮罩層關(guān)閉，這個(gè)應(yīng)該很容易實(shí)現(xiàn)，給 overlay 添加一個(gè)點(diǎn)擊事件監(jiān)聽就好了，但是要注意一點(diǎn)就是，當(dāng)你點(diǎn)擊遮罩層中的 content 時(shí)，不應(yīng)當(dāng)關(guān)閉。我們先回顧一下 DOM2 事件模型中的規(guī)定的事件流，事件從 window 開始，執(zhí)行捕獲過程，然后到目標(biāo)階段，接著執(zhí)行冒泡過程，回到 window，這個(gè)流程就導(dǎo)致我們?nèi)绻c(diǎn)擊了 content，overlay 同樣也會(huì)觸發(fā)點(diǎn)擊事件（DOM 2 默認(rèn)冒泡階段觸發(fā)事件）。針對(duì)這種情況，我們可以使用事件中提供的 path 屬性，該屬性描述了事件冒泡過程中從目標(biāo)元素的 window 的一個(gè)路徑，所以通過 path 的第一個(gè)參數(shù)，我們就可以判斷這個(gè) click 是哪個(gè)元素觸發(fā)的了。

在我們的 modal 中，如果要實(shí)現(xiàn)點(diǎn)擊遮罩層關(guān)閉，我們可以監(jiān)聽 overlay 元素的點(diǎn)擊事件，然后通過 path 屬性判斷事件是否是 overlay 觸發(fā)的，是否應(yīng)該關(guān)閉模態(tài)框。因?yàn)?overlay 的 div 使我們自己生產(chǎn)的所以在 constructor 過程中就可以綁定事件了，注意在 componentWillUnMount 中要記得清除綁定，為了關(guān)閉模態(tài)框，別忘記將 onClose 通過 props 傳遞給 ModalPortal 組件。

class ModalPortal extends PureComponent {
 constructor(props) {
  ...
  this.node.addEventListener('click', this.handleClick);
 }

 componentWillUnmount() {
  this.node.removeEventListener('click', this.handleClick);
 }

 handleClick = e => {
  const { closeModal } = this.props;
  const target = e.path[0];
  if (target === this.node) {
   onClose();
  }
 };
 ...
}

按下 ESC 關(guān)閉

上面我們實(shí)現(xiàn)了點(diǎn)擊遮罩層關(guān)閉模態(tài)框，然后我們應(yīng)該實(shí)現(xiàn)按下 ESC 關(guān)閉這個(gè)功能。通點(diǎn)擊事件一樣，我們只需要監(jiān)聽 keydown 事件就可以了，這一次不用考慮到底是哪里觸發(fā)的問題了，只要 overlay 監(jiān)聽到 keydown 就關(guān)閉模態(tài)框。但是這里也有一個(gè)小問題，就是 overlay 是 div，默認(rèn)是監(jiān)聽不到 keydown 事件的，對(duì)于這個(gè)問題，我們可以給 div 添加一個(gè) tabIndex: 0 的屬性，通過指定 tabIndex，將 div 賦予 focusable 的能力，當(dāng)模態(tài)框打開后，我們手動(dòng)調(diào)用 focus 將焦點(diǎn)放到 overlay 上，這樣就能監(jiān)聽到鍵盤事件。

const ESC_KEY = 27;

class ModalPortal extends PureComponent {
 constructor(props) {
  ...
  this.node = createElement('div', {
   class: `modal-${random()} ${props.className}`,
   tabIndex: 0,
  });
  this.node.addEventListener('keydown', this.handleKeyDown);
 }

 componentWillUnmount() {
  ...
   this.node.removeEventListener('keydown', this.handleKeyDown);
 }

 checkIfVisible = () => {
  const { visible } = this.props;
  if (visible) {
   ...
   this.node.focus();
  } else {
   ...
  }
 };

 handleKeyDown = e => {
  const { closeModal } = this.props;
  if (e.keyCode === ESC_KEY) {
   closeModal();
  }
 };
 ...
}

消除滾動(dòng)條導(dǎo)致的頁面抖動(dòng)

在上面的防止遮罩層后面背景滾動(dòng)是通過在 body 上設(shè)置 overflow: hidden 來防止?jié)L動(dòng)，但是如果 body 已經(jīng)有了滾動(dòng)條，那么 overflow 屬性會(huì)造成滾動(dòng)條消失。滾動(dòng)條在 chrome 上為 15px，打開和關(guān)閉模態(tài)框會(huì)使頁面不停地對(duì)這 15px 做處理，導(dǎo)則頁面抖動(dòng)。為了防止抖動(dòng)，我們可以在滾動(dòng)條消失后給 body 添加 15px 的右邊距，滾動(dòng)條出現(xiàn)后在刪除右邊距，通過這樣的方法，頁面就不會(huì)發(fā)生抖動(dòng)了。

因?yàn)楦鱾€(gè)瀏覽器的標(biāo)準(zhǔn)不一致，所以我們應(yīng)該想辦法計(jì)算出滾動(dòng)條的寬度。為了計(jì)算出滾動(dòng)條的寬度，我們可以使用 innerWidth 和 offsetWidth 這兩個(gè)屬性。offsetWidth 是包含邊框的長度，理所當(dāng)然的包含了滾動(dòng)條的寬度，只需要使用 offsetWidth 減去 innerWidth，得到的差值就是滾動(dòng)條的寬度了。我們可以手動(dòng)創(chuàng)建一個(gè)隱藏的有寬度的且有滾動(dòng)條的元素，然后通過這個(gè)元素來獲取滾動(dòng)條的寬度。

const calcScrollBarWidth = function() {
 const testNode = createElement('div', {
  style: 'visibility: hidden; position: absolute; width: 100px; height: 100px; z-index: -999; overflow: scroll;'
 });
 document.body.appendChild(testNode);
 const scrollBarWidth = testNode.offsetWidth - testNode.clientWidth;
 document.body.removeChild(testNode);
 return scrollBarWidth;
};

const preventJitter = function() {
 const scrollBarWidth = calcScrollBarWidth();
 if (parseInt(document.documentElement.style.marginRight) === scrollBarWidth) {
  document.documentElement.style.marginRight = 0;
 } else {
  document.documentElement.style.marginRight = scrollBarWidth + 'px';
 }
};

結(jié)語

我們上面討論了做好一個(gè)模態(tài)框所需要考慮的技術(shù)，但是肯定還有不完善和錯(cuò)誤的地方，所以，如果錯(cuò)誤的地方請(qǐng)給我提 issue 我會(huì)盡快修正。代碼

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論