zent-portal

这个组件是绝大部分弹出式组件的实现基础，如dialog, tooltip, datetime-picker等。这个 组件做的事情很简单，就是把它的child render到一个给定的DOM node下面，组件被unmount的时候 负责把它的child一起清理掉。

任意props被修改后会触发一定程度的重绘，children, selector被修改会导致unmount再mount； 其它props被修改仅更新现有DOM node的属性。

已知问题

1. 在Portal的children上使用字符串形式的ref会报错，可以使用函数形式的ref绕过这个问题。 字符串形式的ref会报错是因为Portal的children没有owner，为什么函数形式的ref可以绕过这个问题呢？ 看React的代码就知道了。 另外官方也不鼓励使用字符串形式的ref了。

2. 我们用的15.0.2版本的React有个bug会导致某些情况下依赖state的context不更新（参考02-context这个例子）。 请升级React到15.2.1以上。

API

| 参数 | 说明 | 类型 | 默认值 | 备选值 | |------|------|------|--------|--------| | children | 必填参数，只支持一个child | string | | | | selector | 可选参数，渲染child的DOM节点 | string or DOM Element | 'body' | 合法的CSS selector或者某个DOM节点 | | visible | 可选参数，是否渲染child | bool | true | true, false | | className | 可选参数，自定义额外类名 | string | '' | '' | | css | 可选参数，额外的css样式。例如，{ 'margin-left': '10px' } | object | {} | | | | prefix | 可选参数，自定义前缀 | string | 'zent' | | |

withESCToClose

一个HOC，封装了按ESC关闭的逻辑。

import _Portal from 'zent-portal';
import { withESCToClose } from 'zent-portal';
const Portal = withESCToClose(_Portal);

HOC除了支持上面Portal所有的属性外，还支持另外的参数。

| 参数 | 说明 | 类型 | 默认值 | 备选值 | |------|------|------|--------|--------| | visible | 必填参数，注意这个属性原始的Portal是可选的 | bool | true | true, false | | onClose | 必填参数，ESC按下是的回调函数 | function(): void | | |

withNonScrollable

封装了禁止container滚动的逻辑。

import _Portal from 'zent-portal';
import { withNonScrollable } from 'zent-portal';
const Portal = withNonScrollable(_Portal);

HOC支持上面Portal所有的属性，另外，visible是必填项。

| 参数 | 说明 | 类型 | 默认值 | 备选值 | |------|------|------|--------|--------| | visible | 必填参数，注意这个属性原始的Portal是可选的 | bool | true | true, false |