zent-portal

v1.1.0

把任意React组件渲染到你指定的地方

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

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

已知问题

在Portal的children上使用字符串形式的ref会报错，可以使用函数形式的ref绕过这个问题。字符串形式的ref会报错是因为Portal的children没有owner，为什么函数形式的ref可以绕过这个问题呢？看React的代码就知道了。另外官方也不鼓励使用字符串形式的ref了。
我们用的15.0.2版本的React有个bug会导致某些情况下依赖state的context不更新（参考02-context这个例子）。请升级React到15.2.1以上。

参数	说明	类型	默认值	备选值
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'`

一个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

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

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

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

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

npm i zent-portal