Portal

用于在 DOM 层级之外渲染元素。

用法

该Portal 使用 ReactDOM.createPortal API 将元素渲染到 document.body 的末尾或指定容器中。

import { Portal } from "@chakra-ui/react"

<Portal>
  <div>Portal content</div>
</Portal>

示例

自定义容器

使用 container 属性将 Portal 渲染到自定义容器中。

import { Portal } from "@chakra-ui/react"

const Demo = () => {
  const containerRef = React.useRef()
  return (
    <>
      <Portal container={containerRef}>
        <div>Portal content</div>
      </Portal>
      <div ref={containerRef} />
    </>
  )
}

禁用

使用 disabled 属性禁用 Portal。这将在相同的 DOM 层级中渲染子元素。

import { Portal } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Portal disabled>
      <div>Will render the content in place</div>
    </Portal>
  )
}