# zent-portal

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

Latest version **1.1.0** (published 2017-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install zent-portal
pnpm add zent-portal
yarn add zent-portal
bun add zent-portal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2017-04-24 |
| First published | 2017-02-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2248 |
| Author | Li Chen |
| Maintainers | delai, youzan-lc |

## Links

- npm: https://www.npmjs.com/package/zent-portal
- Repository: https://github.com/youzan/zent
- Homepage: https://github.com/youzan/zent#readme
- Issues: https://github.com/youzan/zent/issues
- npm.io page: https://npm.io/package/zent-portal

## Dependencies (1)

- [zent-utils](https://npm.io/package/zent-utils.md) 1.1.0

## Recent versions

- 1.1.0 (latest) — 2017-04-24
- 1.1.0-beta4 (beta) — 2017-04-19
- 1.1.0-beta1 — 2017-04-18
- 1.0.9 — 2017-04-13
- 1.0.8 — 2017-04-13
- 1.0.7 — 2017-03-08
- 1.0.7-beta2 — 2017-03-02
- 1.0.7-beta1 — 2017-02-27
- 1.0.6 — 2017-02-17
- 1.0.5 — 2017-02-15
- 1.0.4 — 2017-02-15
- 1.0.3 — 2017-02-15
- 1.0.2 — 2017-02-13
- 1.0.1 — 2017-02-13
- 1.0.0 — 2017-02-10

## README

## Portal 传送门

传送门组件。

### 使用场景

这个组件不提供样式，但它是所有弹层组件的基石。使用 `Portal` 的好处是不需要自己管理动态插入的节点，防止内存泄露。

### 代码演示

:::demo 基本用法，第二行是 `Portal` 插入的，可以在浏览器里审查元素观察Html结构
```js
import { Portal } from 'zent';

ReactDOM.render(
	<div className="zent-doc-portal-container">
		<div className="zent-doc-portal-mount-node">这里是原来就有的内容</div>
		<Portal selector=".zent-doc-portal-mount-node">
			<div className="zent-doc-portal-content">这里是 Portal 动态插入的内容</div>
		</Portal>
	</div>
	, mountNode
);
```
:::

### API

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

`Portal` 另外还提供了几个高阶组件(HOC)，提供了一些弹层常用的逻辑。

#### withESCToClose

封装了按ESC关闭的逻辑.

| 参数      | 说明                        | 类型   | 默认值    |
| ------- | ------------------------- | ---- | ------ |
| visible | 必填参数, 注意这个属性原始的Portal是可选的 | bool | `true` |
| onClose | 必填参数, ESC按下是的回调函数         | func |    |   |

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

#### withNonScrollable

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

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

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

### 组件原理

- 组件的主要功能是把其 `child` 插入到一个给定的 DOM node中, 并且在组件被 `unmount` 的时候将其 `child` 属性对应的 DOM 节点删除.
- 任意 props 被修改后会触发一定程度的重绘, `children`, `selector`被修改会导致组件 `unmount` 再 `mount`；其它props被修改仅更新现有 DOM node 的属性.

### 已知问题

-  在 Portal 的 `children` 上使用字符串形式的 `ref` 会报错, 可以使用函数形式的 `ref` 绕过这个问题. 其原因是 Portal 的 `children` 没有owner, 使用函数形式的`ref`可以绕过这个问题的原因参见[ Here](https://github.com/facebook/react/blob/v15.0.2/src/renderers/shared/reconciler/ReactRef.js#L18). 此外官方也不鼓励使用字符串形式的 `ref`.

-  `15.0.2` 版本的 React 有个 bug 会导致某些情况下依赖 `state` 的 `context` 不更新 (参考 example: 02-context), 请等待 React 版本的统一升级.

---
_Source: https://npm.io/package/zent-portal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._