使用React Portal将子组件呈现到父组件的DOM节点中

import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

function Modal({ isOpen, onClose, children }) {
  const modalRoot = useRef(document.getElementById('modal-root'));

  useEffect(() => {
    if (!modalRoot.current) {
      modalRoot.current = document.createElement('div');
      modalRoot.current.id = 'modal-root';
      document.body.appendChild(modalRoot.current);
    }
    return () => {
      if (modalRoot.current && modalRoot.current.parentNode) {
        modalRoot.current.parentNode.removeChild(modalRoot.current);
      }
    };
  }, []);

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay">
      <div className="modal-content">
        <button onClick={onClose}>Close</button>
        {children}
      </div>
    </div>,
    modalRoot.current
  );
}

function App() {
  const [isModalOpen, setModalOpen] = React.useState(false);

  return (
    <div>
      <button onClick={() => setModalOpen(true)}>Open Modal</button>
      <Modal isOpen={isModalOpen} onClose={() => setModalOpen(false)}>
        <h2>Modal Title</h2>
        <p>This is the content of the modal.</p>
      </Modal>
    </div>
  );
}

export default App;

<div className="modal-overlay" onClick={e => e.stopPropagation()}>
  {/* ... */}
</div>