Portal

功能类似 ReactDOM.createPortal ，接收 container 作为渲染 Portal 内容的真实位置。配合PortalProvider 使用提供统一的挂载点所有Portal 渲染到 PortalProvider 下

import { Portal } from '@tencent/ykui'

React.useRef 作为 container

function PortalContainerDemo(props) {
  const ref = React.useRef(null)
  return (
    <>
      <div ref={ref} id="container"></div>
      <Portal container={ref}>
        <p>React.useRef作为container</p>
      </Portal>
    </>
  )
}

React.useState 作为 container

function PortalContainerDemo(props) {
  const [node, setNode] = React.useState(null)
  return (
    <>
      <div ref={setNode} id="container"></div>
      <Portal container={node}>
        <p>React.useState作为container</p>
      </Portal>
    </>
  )
}

PortalProvider (上下文挂载点)

PortalProvider为Portal提供container作为挂载点，使用Portal时如何container为undefined则会从PortalContext中获取container作为挂载点

function PortalContextDemo(props) {
  return (
    <PortalProvider>
      {(ref) => (
        <>
          <Portal>
            <p>portal1 在global-container中渲染</p>
          </Portal>
          <Portal>
            <p>portal2 在global-container中渲染</p>
          </Portal>
          <div className="global-container" ref={ref}/>
        </>
      )}
    </PortalProvider>
  )
}

Portal API

属性	说明	类型	默认值
disablePortal	禁用则原来位置渲染	boolean	--
container	挂载节点的位置	string〡HTMLElement〡React.RefObject<HTMLElement>〡(() => HTMLElement)	--