// 父組件
import React, { useState } from 'react';
import Modal from './Modal';

const ParentComponent = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

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

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

  return (
    <div>
    <button onClick={handleOpenModal}>打開模態(tài)框</button>
     {isModalVisible && <Modal onClose={handleCloseModal} />}
    </div>
   );
  };

  export default ParentComponent;

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

  const Modal = ({ onClose }) => {
    return (
      <div className="modal">
      <p>這是一個模態(tài)框</p>
      <button onClick={onClose}>關閉模態(tài)框</button>
      </div>
    );
  };

  export default Modal;

// 子組件
const Modal = forwardRef((props, ref) => {
  const [visible, setVisible] = useState(false);

  useImperativeHandle(ref, () => ({
    open: () => setVisible(true),
    close: () => setVisible(false)
  }));

  return visible ? (
    <div className="modal">
      <button onClick={() => setVisible(false)}>關閉</button>
    </div>
  ) : null;
});

// 父組件
function Parent() {
  const modalRef = useRef();

  return (
    <div>
      <button onClick={() => modalRef.current?.open()}>打開彈窗</button>
      <Modal ref={modalRef} />
    </div>
  );
}