JSPM

  • Created
  • Published
  • Downloads 3632
  • Score
    100M100P100Q109823F
  • License MIT

Portal component

Package Exports

  • @uiw/react-portal
  • @uiw/react-portal/cjs/index.js
  • @uiw/react-portal/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw/react-portal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Portal 入口

Open in unpkg NPM Downloads npm version

Portals 是 react 16 提供的官方解决方案,使得组件可以脱离父组件层级挂载在 DOM 树的任何位置,我们利用这个方法,可将模态对话框生成到根节点的外面。

import { Portal } from 'uiw';
// or
import Portal from '@uiw/react-portal';

基本使用

import { Portal } from 'uiw';

<Portal>
  此文本在 document.body 的末尾传送!
</Portal>
<Portal node={document && document.getElementById('dom-id')}>
  此文本在显示在 dom-id 的 dom 对象中 
</Portal>

切换不同的 <Portal />

{isVisiable && <Portal>切换不同的 Portal</Portal>}

Props

参数 说明 类型 默认值
container 指定容器节点生成,服务端渲染默认为 null any document.body
visible 当值为 true 的时候才会创建 createPortal,可避免初始化创建多余的 dom 节点挂载 @v4.9.0+ 之后移除了 boolean -
onChildrenMount 渲染后的回调函数 @v4.9.0+ 之后移除了 () => void -