Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。常见场景：对话框、悬浮卡以及提示框！

定义一个 模态框组件：

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

const Modal = () => {
  const elRef = useRef<HTMLDivElement>(document.createElement('div'));

  useEffect(() => {
    document.body.appendChild(elRef.current);
    return () => {
      elRef.current && document.body.removeChild(elRef.current);
    };
  }, []);

  if (!elRef.current) {
    return null;
  }

  return ReactDOM.createPortal(<div>这个是模态框,直接挂载在body下面!!</div>, elRef.current);
};

在另一个组件中使用该模态框组件：

const App: React.FC = memo(() => {
  const [portalVisible, setPortalVisible] = useState(false);

  return (
    <div>
      <button type="button" onClick={() => setPortalVisible(!portalVisible)}>
        测试Portal
      </button>
      {portalVisible && <Modal />}
    </div>
  );
});