基于 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}>Open Modal</button>

      {/* Modal Dialog */}
      {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 符合预期的类型和格式要求，从而减少错误发生的可能性。

综上所述，封装公共组件需要考虑到组件的可复用性、易用性、可维护性、性能和测试等方面。同时，还需要注意组件的状态管理、样式设计、参数校验等细节问题。