React传送门：灵活布局，超越DOM层级限制

2023-11-05 20:09:15

导读：
React中的Portal，如同一位巧妙的传送使者，将子节点穿越重重DOM层级，落脚于任一指定的DOM节点之下。这种灵活的布局机制，突破了传统层级束缚，为Web应用设计开辟了全新的可能性。

序言：
在React的世界中，组件的渲染通常遵循既定的DOM层级结构。子节点被安置在父节点的范围内，呈现出树状的父子关系。然而，在某些场景下，这种层级限制可能成为布局创新的绊脚石。

何为Portal？
React Portal应运而生，打破了DOM层级的枷锁。它是一种特殊渲染机制，允许开发者将子节点渲染到父组件之外的任意DOM节点中。这种跨越层级渲染的能力，赋予了布局极大的灵活性。

Portal的用途：
Portal的应用场景广泛，以下列举了一些常见的用法：

模态窗口： 将模态窗口渲染到根节点之外，脱离原有组件层级，实现悬浮于屏幕顶层的视觉效果。
全局菜单： 创建位于屏幕边缘或页面的固定菜单，不受父组件布局影响，始终可见。
组件重用： 将可重用的组件封装为Portal，方便在不同位置插入和移除，避免层级冲突。

Portal的实现：
使用Portal需要借助React的createPortal方法。该方法接受两个参数，第一个是需要渲染的子节点，第二个是目标DOM节点。示例如下：

import { createPortal } from 'react-dom';

const App = () => {
  return (
    <div className="app">
      <Portal target={document.getElementById('modal-root')}>
        <Modal />
      </Portal>
    </div>
  );
};

const Modal = () => {
  return (
    <div className="modal">
      <p>模态窗口内容</p>
    </div>
  );
};