在 React 中什么是 Portal ?

常见使用场景

1. ​模态框（Modal）​：

   • 将模态框渲染到页面顶部，避免被父组件的样式影响。

2. ​工具提示（Tooltip）​：

   • 将工具提示渲染到靠近目标元素的位置。

3. ​弹出菜单（Dropdown）​：

   • 将弹出菜单渲染到页面顶部，避免被父组件的 overflow: hidden 或 z-index 影响。

4. ​通知（Notification）​：

   • 将通知渲染到页面顶部，确保通知始终可见。

import React from 'react';
import ReactDOM from 'react-dom';

function Modal({ children }) {
  // 创建一个目标 DOM 节点
  const div = document.createElement('div');
  
  useEffect(() => {
      document.body.appendChild(div);
      return () => document.body.removeChild(div)
  }, [])

  // 使用 Portal 将子组件渲染到 modalRoot 中
  return ReactDOM.createPortal(
    children,
    div
  );
}

export default Modal;