用react封装一个弹窗组件

好的，以下是一个简单的弹窗组件示例：

import React, { useState } from "react";

const Modal = ({ title, content, onClose }) => {
  const [isOpen, setIsOpen] = useState(true);

  const handleModalClose = () => {
    setIsOpen(false);
    onClose();
  };

  return (
    <div className={`modal ${isOpen ? "is-active" : ""}`}>
      <div className="modal-background" onClick={handleModalClose} />
      <div className="modal-card">
        <header className="modal-card-head">
          <p className="modal-card-title">{title}</p>
          <button
            className="delete"
            aria-label="close"
            onClick={handleModalClose}
          />
        </header>
        <section className="modal-card-body">{content}</section>
      </div>
    </div>
  );
};

export default Modal;

这个弹窗组件包括一个标题和内容，可以通过设置 `isOpen` 属性来控制显示和隐藏。在关闭弹窗时，我们需要调用 `onClose` 回调函数来通知父组件。

使用方式：

import React, { useState } from "react";
import Modal from "./Modal";

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <button onClick={handleOpenModal}>Open Modal</button>
      <Modal
        title="Modal Title"
        content="This is the content of the modal."
        onClose={handleCloseModal}
        isOpen={isModalOpen}
      />
    </div>
  );
};

export default App;

在这个例子中，我们在父组件中定义了一个 `handleOpenModal` 回调函数来打开弹窗，以及一个 `handleCloseModal` 回调函数来关闭弹窗。我们将这些回调函数传递给 `Modal` 组件，并通过 `isOpen` 属性来控制弹窗的显示和隐藏。

注意，这只是一个简单的示例，实际应用中可能需要更多的功能和自定义选项。