使用

Portal是 ReactDOM.createPortalAPI 的包装器组件。在给定元素或document.body的末尾位置呈现任意组件或元素。默认情况下Dialog,Popover等组件包装在Portal中。

使用Portal可以在不同位置呈现组件或元素(默认为document.body的末尾)。

当您想要防止父样式被子样式继承时Portal非常有用, 这些样式通常是与position和z-index相关的 CSS 属性

服务器端渲染

Portal在服务器端渲染期间不会渲染其内容。Portal中的所有组件仅在挂载到 dom 后呈现。

指定 target

你可以指定 DOM 节点作为 portal 渲染的目标.

import Portal from "@rtdui/core/Portal";

function Demo() {
  return <Portal target="#portal-container">My portal</Portal>;
}

如果未指定target属性, 则会将Portal渲染到document.body的末尾。