模態框是一個常見的組件，下面讓我們使用 React 實現一個現代化的模態框吧。

組件設計

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

React 是一個狀態（數據）驅動的前端框架，一個模態框最重要的狀態就是打開和關閉，visible，當 visible 為 true 時，模態框打開，反之亦然。

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

模態框的顯示和隱藏，同時該組件還接受一個 onClose 的 prop，用來關閉模態框。

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

一個完整的模態框還需要標題和內容，因此，我們還需要一個 header 的 prop 來傳遞模態框的 header，并把 Modal 組件的 children 作為模態框的內容 content。最后，我們的模態框 Modal 的調用方式是這樣的：

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，請升級到最新版本的 react 來體驗。

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

確定了我們的模態框的調用方式，現在我們來總結一下完整的模態框應該具備那些特性：

模態框組件應該掛載在 body 的第一層中，不要將模態框放置到父組件中，因為模態框放置到父組件中很容易受到其他元素的干擾。 模態框顯示后，模態框背后的背景不能隨著鼠標滾輪而滾動。 點擊模態框的遮罩層后，應該關閉模態框。

基礎功能

上面分析玩模態框的功能后，讓我們先開始實現一版最基礎的模態框。從 HTML 結構上來講，模態框組件分為 overlay 遮罩層和 content 內容兩部分組成，其中 content 里面還應該分為 header, content, footer（這里我們沒有實現）三部分組成。