# @formsort/react-embed 中文文档规范地址：https://npmcn.com/package/%40formsort/react-embed/ 版本：3\.7\.0 npm 元数据更新时间：2026-11-10T10:53:56.813Z 中文译文更新时间：2026-11-15T09:14:06.194Z 软件包许可：ISC 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。原始 npm 页面：https://www.npmjs.com/package/%40formsort/react-embed 原文对照：https://npmcn.com/package/%40formsort/react-embed/?lang=original 项目主页：https://github.com/formsort/oss/tree/master/packages/react-embed#readme 源码仓库：https://github.com/formsort/oss ## 关键信息（来自 npm 元数据） - 包体积（解压后）：15.8 kB，4 个文件 - 模块格式：CommonJS - TypeScript 类型：包内自带 - 运行依赖：2 个 - peer 依赖：react \>=16\.13\.0 \<19\.0\.0 - 首次发布：2020-03-17T18:22:10.973Z - 最新版本发布：2026-11-10T10:53:56.298Z - 近 30 天下载量：37167（2026-10-16 至 2026-11-14，npm 官方下载统计） - 已发布版本数：41（近 12 个月 4 个） ## 中文简介在反应组件中嵌入窗体串流 ## 安装 ```sh npm install @formsort/react-embed ``` 也可以使用：`pnpm add @formsort/react-embed`、`yarn add @formsort/react-embed`、`bun add @formsort/react-embed` ## README # @ formsort/ react-embed (英语) 嵌入 [格式化](https://formsort.com/) 反应组件内的流量. 这个包裹很方便 [@ formsort/web-embed- api](https://github.com/formsort/oss/tree/master/packages/web-embed-api)。。。 . **重要说明:** 此软件包用于React Web应用程序. 如果您想在 React 本地应用程序中嵌入格式流,请参见 [反应本地嵌入式引导](https://npmcn.com/package/%40formsort/react-embed/ReactNativeEmbed.md)。。。 . ## 安装添加 `@formsort/react-embed` 执行 `pnpm add @formsort/react-embed`, (中文(简体) ), `yarn add @formsort/react-embed`,或 `npm install @formsort/react-embed`。。。 . ## 使用量以下是基本用法的例子: ```tsx import React from 'react'; import EmbedFlow from '@formsort/react-embed'; const EmbedFlowExample: React.FunctionComponent = () => (

); ``` 使用单独的 `SecureEmbedFlow` 用于通过 POST 中响应器数据的组件机构 : ```tsx import { SecureEmbedFlow } from '@formsort/react-embed'; ; ``` `responderUuid`, (中文(简体) ), `initialAnswers`, (中文(简体) ), `formsortEnv`,以及 `variantRevisionUuid` 为: 选项. `SecureEmbedFlow` 不接受 `queryParams`它发送 `responderUuid` 财务报告和审定财务报表 `initialAnswers` 在POST体内。它又说 `formsortEnv` 财务报告和审定财务报表 `variantRevisionUuid` 到导航 URL. 它的配置和事件道具与 `EmbedFlow`。。。 . ### 活动您可以添加事件倾听器到流程中 `Flowloaded`, (中文(简体) ), `redirect` 见 [所有事件听众](https://github.com/formsort/oss/tree/master/packages/web-embed-api#event-listeners) ### 道具 | 专利名称 | 说明 | 需求 | 示例数值 | | --- | --- | --- | --- | | 客户端标签 | 客户端名称 | 对 | `formsort` | | 流量标签 | 流程名称 | 对 | `onboarding` | | 变位标签 | 变体名称 | 没有 | `main` | | 响应者Uuid | 正在装入当前答案的响应器 uuid | 没有 | `e4923baa-dc2d-4555-813c-a166952292fa` | | 窗体交换 Env | 组合环境标签,如果不使用生产 | 没有 | `staging` | | 变体 | 变种修订 UUID 以装入特定版本而不是最近版本 | 没有 | `0a3c4f52-1b8e-4d1a-9b6f-3a2e5c7d9f10` | | 查询 | 额外的查询参数,用于在表格中预先填入答案 | 没有 | `[['name', 'Olivia'], ['age', '3']]` | | 嵌入式配置 | 配置传递到下面 [`FormsortWebEmbed`](https://github.com/formsort/oss/tree/master/packages/web-embed-api) | 没有 | `{ style: { height: '100%' } }` | | 已下载 | [事件听众](https://github.com/formsort/oss/tree/master/packages/web-embed-api#flowloaded-answers--key-string-any----void) | 没有 | `() => { console.log('flow loaded') }` | | 已关闭 | [事件听众](https://github.com/formsort/oss/tree/master/packages/web-embed-api#flowclosed-answers--key-string-any---void) | 没有 | `() => { console.log('flow closed') }` | | 最终化 | [事件听众](https://github.com/formsort/oss/tree/master/packages/web-embed-api#flowfinalized-answers--key-string-any---void) | 没有 | `() => { console.log('flow finalized') }` | | 已下载 | [事件听众](https://github.com/formsort/oss/tree/master/packages/web-embed-api#steploaded-answers--key-string-any---void) | 没有 | `() => { console.log('step loaded') }` | | 已安装 | [事件听众](https://github.com/formsort/oss/tree/master/packages/web-embed-api#steploaded-answers--key-string-any---void) | 没有 | `() => { console.log('step loaded') }` | | 重定向 | [事件听众](https://github.com/formsort/oss/tree/master/packages/web-embed-api#redirect--url-string-answers--key-string-any-----cancel-boolean---undefined) | 没有 | `(url: string) => { console.log('redirecting to:', url) }` | | 未经授权 | [事件听众](https://github.com/formsort/oss/tree/master/packages/web-embed-api#unauthorized---void) | 没有 | `() => { console.log('ID token is missing or invalid.') }` | ### 安全 EmbedFlow 道具 `SecureEmbedFlow` 支持 `clientLabel`, (中文(简体) ), `flowLabel`, (中文(简体) ), `variantLabel`, (中文(简体) ), `embedConfig`,所有事件道具来自 `EmbedFlow`. 它还支持这些安全嵌入道具 : | 专利名称 | 说明 | 需求 | 示例数值 | | --- | --- | --- | --- | | 响应者Uuid | pOST 内发送的响应器 UUID | 没有 | `e4923baa-dc2d-4555-813c-a166952292fa` | | 初始答复 | pOST 中发送的初始答案 | 没有 | `{ firstName: 'Olivia' }` | | 窗体交换 Env | 一体化环境 | 没有 | `staging` | | 变体 | 变种修订 UUID 以装入 | 没有 | `0a3c4f52-1b8e-4d1a-9b6f-3a2e5c7d9f10` | ### 装入特定变体修订版使用 `variantRevisionUuid` 道克来加载特定的变种修订. 如果想要显示最新的变体,请不要使用. 两者 `EmbedFlow` 财务报告和审定财务报表 `SecureEmbedFlow` 支持这个计划. ```tsx import React from 'react'; import EmbedFlow from '@formsort/react-embed'; const EmbedFlowExample: React.FunctionComponent = () => (

); ``` ## 常见问题 ### @formsort/react-embed 是什么？在反应组件中嵌入窗体串流 ### 如何安装 @formsort/react-embed？在项目目录运行 npm install @formsort/react-embed，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.13\.0 \<19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @formsort/react-embed 支持 TypeScript 吗？支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @formsort/react-embed 支持 ESM 还是 CommonJS？以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @formsort/react-embed 可以商用吗？ @formsort/react-embed 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @formsort/react-embed 的下载量有多少？根据 npm 官方下载统计，@formsort/react-embed 在 2026/10/16 – 2026/11/14 这 30 天内被下载 37,167 次，日均约 1,239 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @formsort/react-embed 还在维护吗？最新版本 3\.7\.0 发布于 2026/11/10（5 天前）；至今共发布 41 个版本，其中过去 12 个月发布了 4 个；首次发布于 2020/03/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。