通过在组件之间传递状态来关闭Modal

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [isModalOpen, setIsModalOpen] = useState(false);

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

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>打开Modal</button>
      {isModalOpen && (
        <ChildComponent closeModal={closeModal} />
      )}
    </div>
  );
}

// 子组件
import React from 'react';

function ChildComponent({ closeModal }) {
  return (
    <div className="modal">
      <h2>这是一个Modal</h2>
      <p>Modal的内容</p>
      <button onClick={closeModal}>关闭Modal</button>
    </div>
  );
}