Components

<Portal>

<Portal> 是一个组件，允许你将子元素渲染到父组件 DOM 层级之外的 DOM 节点中。

当你的 UI 中有一些需要显示在其他内容之上的元素时（如模态框和工具提示），这个组件会非常有用。

import { Portal } from "solid-js/web"
import type { JSX } from "solid-js"

function Portal(props: {
  mount?: Node
  useShadow?: boolean
  isSVG?: boolean
  children: JSX.Element
}): Text

这会将元素插入到挂载节点中。适用于在页面布局之外插入模态框。事件仍然通过组件层级传播，但是 <Portal> 只会在客户端运行，并且禁用了水合（hydration）。

除非目标是文档头部，否则 Portal 会被挂载在一个 <div> 中。 useShadow 将元素放置在 Shadow Root 中以实现样式隔离，如果要插入到 SVG 元素中，则需要设置 isSVG 以避免插入 <div>。

<Portal mount={document.getElementById("modal")}>
  <div>My Content</div>
</Portal>

属性

名称	类型	默认值	描述
`mount`	`Node`	document.body	用于挂载 portal 的 DOM 节点。
`useShadow`	`boolean`	false	是否使用 Shadow Root 进行样式隔离。
`isSVG`	`boolean`	false	挂载节点是否为 SVG 元素。

报告此页面问题