基於 React 的彈窗元件

代碼示例#

import React, { useState } from 'react';
import PropTypes from 'prop-types';

const Modal = ({ title, body, onClose }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => {
    setIsModalOpen(false);
    onClose();
  };

  return (
    <>
      <button onClick={handleOpenModal}>打開彈窗</button>

      {/* 彈窗對話框 */}
      {isModalOpen && (
        <div className="modal">
          <div className="modal__overlay" onClick={handleCloseModal} />
          <div className="modal__dialog">
            <div className="modal__header">{title}</div>
            <div className="modal__body">{body}</div>
            <button className="modal__close-btn" onClick={handleCloseModal}>
              X
            </button>
          </div>
        </div>
      )}
    </>
  );
};

Modal.propTypes = {
  title: PropTypes.string.isRequired,
  body: PropTypes.node.isRequired,
  onClose: PropTypes.func.isRequired,
};

export default Modal;

在這個示例中，我們封裝了一個名為 Modal 的彈窗組件。它有三個 props：

title：彈窗標題，必填。
body：彈窗內容，支持任何類型的 React 元素，必填。
onClose：關閉彈窗時的回調函數，必填。
這個組件的主要功能就是展示一個彈窗。當用戶點擊打開按鈕時，會出現一個遮罩層和一個彈窗框，彈窗內容由 title 和 body 決定。

封裝公共組件需要考慮哪些內容呢？除了具體功能以外，下面是一些需要考慮的通用內容：

組件的可複用性：封裝組件時應該考慮到未來可能的需求變更，組件的設計應該是具備可擴展性的。
組件的易用性：為了讓開發者使用方便，組件的 API 應該盡可能簡單明了，並且提供足夠的文檔和示例。
組件的可維護性：代碼應該易於理解和修改，並且結構清晰，不要有過多的耦合和重複代碼。
組件的性能：組件應該符合性能要求，並且在各種場景下表現正常。
組件的測試：組件應該經過充分的測試，確保其在各種情況下都能表現正常。

組件講解#

接下來我來講解一下這個彈窗組件的具體實現：

組件的狀態管理#

在這個組件中，我們使用了 React 的 Hook useState 來管理彈窗的打開和關閉狀態。具體來說，在組件中定義了一個名為 isModalOpen 的 state，初始值為 false，表示彈窗處於關閉狀態。

然後，我們通過 handleOpenModal 和 handleCloseModal 函數來控制 isModalOpen 的值。當用戶點擊打開按鈕時，我們會調用 handleOpenModal 函數將 isModalOpen 設置為 true，從而顯示彈窗。當用戶點擊彈窗內部的關閉按鈕或者遮罩層時，我們會調用 handleCloseModal 函數將 isModalOpen 設置為 false，從而關閉彈窗。

組件的樣式#

在這個組件中，我們使用了 CSS 來定義彈窗的樣式。具體來說，在彈窗外部套了一個名為 modal 的 div，然後在這個 div 內部定義了三個子元素：

modal__overlay：遮罩層，用於阻止用戶操作其他內容。
modal__dialog：彈窗框，用於顯示彈窗內容。
modal__close-btn：關閉按鈕，用於關閉彈窗。
在 CSS 中，我們可以利用偽元素 ::before 和 ::after 來實現一些常見的 UI 元素，例如箭頭、按鈕等。

組件的參數校驗#

在這個組件中，我們使用了 prop-types 這個庫來進行參數校驗。具體來說，在定義組件時，我們通過引入 PropTypes 來聲明 Modal 的 props，並且通過 Modal.propTypes 對它們進行校驗。這樣可以確保傳入組件的 props 符合預期的類型和格式要求，從而減少錯誤發生的可能性。

綜上所述，封裝公共組件需要考慮到組件的可複用性、易用性、可維護性、性能和測試等方面。同時，還需要注意組件的狀態管理、樣式設計、參數校驗等細節問題。