@chakra-ui/门户

在 React Portals 中渲染组件的包件, 支持嵌入 门户与堆放.

安装

yarn add @chakra-ui/portal

# or

npm i @chakra-ui/portal

导入组件

import { Portal, PortalManager } from "@chakra-ui/portal"

打开 PortalManager 一次在您的应用程序根部

function App() {
  return (
    <ThemeProvider>
      <CSSReset />
      <PortalManager>{/* Your app goes here  */}</PortalManager>
    </ThemeProvider>
  )
}

基本用途

门户网站默认会变成门户管理器的节点, 而不是 document.body。 。 。 .

<div>
  <p>Welcome</p>
  <Portal>This text has been portaled</Portal>
</div>

嵌入式门户

Nesting门户网站对于构建像嵌入式菜单这样的复杂部件非常有用, 弹出式,模式等.

<Portal>
  This is a portal.
  <Portal>This is a nested portal</Portal>
</Portal>

自定义容器

也可以将元素输入自定义容器。 只要通过一个 containerRef 表示 node 这一点.

<>
  <div ref={ref} />
  <Portal containerRef={ref}>
    <h1>Hello world</h1>
  </Portal>
</>