# @cloud-ru/ds-portal-context 中文文档

规范地址：https://npmcn.com/package/%40cloud-ru/ds-portal-context/

版本：1\.0\.4
npm 元数据更新时间：2026-11-11T15:00:03.068Z
中文译文更新时间：2026-11-11T15:11:30.488Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cloud-ru/ds-portal-context
原文对照：https://npmcn.com/package/%40cloud-ru/ds-portal-context/?lang=original
项目主页：https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/portal-context
源码仓库：https://github.com/cloud-ru-tech/snack-v2

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：193 kB，57 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2026-08-18T12:38:31.343Z
- 最新版本发布：2026-11-11T15:00:02.512Z
- 近 30 天下载量：20567（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 17 个）

## 中文简介

反应背景, QQ DOM- QQ (Tooltip, Popover, Dropdown, Modal, Drawer).

## 安装

```sh
npm install @cloud-ru/ds-portal-context
```

也可以使用：`pnpm add @cloud-ru/ds-portal-context`、`yarn add @cloud-ru/ds-portal-context`、`bun add @cloud-ru/ds-portal-context`

## README

# 门户连接

`@cloud-ru/ds-portal-context` ——反应上下文,QQ DOM-QQQQ (Tooltip, Popover, Dropdown, Modal, Drawer).

`@cloud-ru/ds-portal-context` -=YTET -伊甸园字幕组=- 翻译:`Tooltip`, (中文(简体) ), `Popover`, (中文(简体) ), `Dropdown`, (中文(简体) ), `Modal`, (中文(简体) ), `Drawer` {\\fn华文仿宋\\fs16\\1cHD1D1D1} {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `document.body`{\\fn方正黑体简体\\fs18\\b1\\bord1\\shad1\\3cH2F2F2F}DOM 维基语录链接:名人名言 - 翻译:.

## Когда

-   DS QQ \\\\\\\\ 微前端 / 阴影 DOM - `document.body` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢.
-   {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}====================================================================== ================================================================================================================================================================.
-   E2E QQ故事本 — — — — — — — — — — — — — — — — — — — — — — `iframe`。 。 。 .

\[永久失效連結\] \[永久失效連結\] 新浪财经 `document.body`。 。 。 .

## Установка

```bash
pnpm add @cloud-ru/ds-portal-context
```

```ts
import { PortalContextProvider } from '@cloud-ru/ds-portal-context'
```

## Примеры

### \\ root \\ 门户连接

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}####################################################################################################################################################################################################################################### `document.body`。 。 。 .

```tsx
import { PortalContextProvider, usePortalContext } from '@cloud-ru/ds-portal-context';
import { useMemo, useState } from 'react';
import { createPortal } from 'react-dom';

function PortalChild() {
  const root = usePortalContext();

  if (!root.current) return null;

  return createPortal(<span>Я отрендерен в кастомном root-узле через PortalContext</span>, root.current);
}

export function CustomRoot() {
  const [node, setNode] = useState<HTMLDivElement | null>(null);
  const root = useMemo(() => ({ current: node }), [node]);

  return (
    <div style={{ display: 'flex', gap: 12, flexDirection: 'column' }}>
      <PortalContextProvider root={root}>
        <span>Хост-компонент</span>
        <PortalChild />
      </PortalContextProvider>
      <div ref={setNode} data-test-id='portal-root' />
    </div>
  );
}
```

### Каскад:разные也

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢? 唵(一)из(一)блока(一)теме(一)теме(一)теме(一)теме(一)теме(一)теме(一)теме(一)светлой(一)светлой(一)светлой(一)блока(一)теме(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)теме(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)теме(一)блока(一)блока(一)блока(一)своего(一)блока(一).

```tsx
import { Button } from '@cloud-ru/ds-button';
import { Popover } from '@cloud-ru/ds-popover';
import { PortalContextProvider } from '@cloud-ru/ds-portal-context';
import { COLOR_SCHEME, ColorScheme, useThemeClassnames } from '@cloud-ru/ds-theme';
import { Tooltip } from '@cloud-ru/ds-tooltip';
import { useRef } from 'react';

import styles from './CascadingThemes.module.scss';

// Тематический блок: useThemeClassnames форсит colorScheme и эмитит полный набор sn-* на свой div.
// Этот же div — корень порталов блока (PortalContextProvider root={paneRef}), поэтому тултип и
// поповер монтируются ВНУТРЬ него и наследуют тему блока через CSS-каскад токенов.
function ThemedPane({ scheme, title }: { scheme: ColorScheme; title: string }) {
  const themeClassName = useThemeClassnames({ colorScheme: scheme });
  const paneRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={paneRef} className={`${styles.pane} ${themeClassName}`}>
      <PortalContextProvider root={paneRef}>
        <p className={styles.paneTitle}>{title}</p>
        <Tooltip tip='Тултип рендерится в теме своего блока' placement='top'>
          <Button label='Навести — тултип' appearance='primary' view='filled' />
        </Tooltip>
        <Popover content='Поповер — тоже в теме блока' placement='bottom' trigger='click'>
          <Button label='Кликнуть — поповер' appearance='neutral' view='outline' />
        </Popover>
      </PortalContextProvider>
    </div>
  );
}

export function CascadingThemes() {
  return (
    <div className={styles.grid}>
      <ThemedPane scheme={COLOR_SCHEME.Dark} title='Тёмный блок' />
      <ThemedPane scheme={COLOR_SCHEME.Light} title='Светлый блок' />
    </div>
  );
}
```

## 道具

**门户连接提供工具**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `children` | `string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined` | —— 说 |  |
| `root` | `RefObject<HTMLElement | null>` | —— 说 |  |

## Смотри

-   **工具提示**, (中文(简体) ), **过量**, (中文(简体) ), **下坠**, (中文(简体) ), **模式**, (中文(简体) ), **绘图器** ——потребители.

## 常见问题

### @cloud-ru/ds-portal-context 是什么？

反应背景, QQ DOM- QQ \(Tooltip, Popover, Dropdown, Modal, Drawer\)\.

### 如何安装 @cloud-ru/ds-portal-context？

在项目目录运行 npm install @cloud-ru/ds-portal-context，或使用 pnpm add / yarn add / bun add。

### @cloud-ru/ds-portal-context 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cloud-ru/ds-portal-context 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @cloud-ru/ds-portal-context 可以商用吗？

@cloud-ru/ds-portal-context 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @cloud-ru/ds-portal-context 的下载量有多少？

根据 npm 官方下载统计，@cloud-ru/ds-portal-context 在 2026/10/10 – 2026/11/08 这 30 天内被下载 20,567 次，日均约 686 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cloud-ru/ds-portal-context 还在维护吗？

最新版本 1\.0\.4 发布于 2026/11/11（今天）；至今共发布 17 个版本，其中过去 12 个月发布了 17 个；首次发布于 2026/08/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。