# @comms-id/website-logo-react 中文文档
规范地址：https://npmcn.com/package/%40comms-id/website-logo-react/
版本：0\.2\.2
npm 元数据更新时间：2026-10-31T19:47:01.016Z
中文译文更新时间：2026-10-31T20:35:09.804Z
软件包许可：SEE LICENSE IN LICENSE
本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40comms-id/website-logo-react
原文对照：https://npmcn.com/package/%40comms-id/website-logo-react/?lang=original
项目主页：https://comms.id/
源码仓库：https://github.com/comms-id/platform
弃用说明：Removed\. Comms\.ID products are served live, nothing to install: https://cdn\.comms\.id/website-logo-lookup/latest\.js
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：13.3 kB，11 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=18
- 首次发布：2026-10-21T13:10:19.734Z
- 最新版本发布：2026-10-21T13:14:29.883Z
- 已发布版本数：2（近 12 个月 2 个）
## 中文简介
用于通信的React钩子和组件。ID网站标识字段：网站标识图像，可访问，无布局移位，具有数据属性
## 安装
```sh
npm install @comms-id/website-logo-react
```
也可以使用：`pnpm add @comms-id/website-logo-react`、`yarn add @comms-id/website-logo-react`、`bun add @comms-id/website-logo-react`
## README
# @comms-id / website-logo-react
一个React钩子和一个用于通信的成品组件。网站标志图像：网站的标志，在一个固定大小的方框中，以字母作为后退。没有布局变化，访问者的浏览器只接触Comms.ID。React 18或更高版本；这取决于 `@comms-id/website-logo` 没有别的了。
```tsx
import { createWebsiteLogoBrowserClient } from "@comms-id/website-logo/browser";
import { WebsiteLogoImage } from "@comms-id/website-logo-react";
const client = createWebsiteLogoBrowserClient({ relayUrl: "/api/comms-id/logo" });
export const Customer = () => ;
```
`relayUrl` 您自己的服务器路由，设置与 `@comms-id/relay`您的服务器将调用签名为您注册的应用程序，因此浏览器不持有凭据。
## 图像的作用
- **一个网站:** 主机名如 `example.com`，或URL。立即要求服务；对于空的或无效的站点不要求任何内容。
- **图像** 是Comms。中指定的ID副本 `resolution.imageUrl`，从… `api.comms.id` (或 `api-test.comms.id`）. 上游 `logoUrl` 永远不会被加载：访问者的浏览器只会接触到通信。ID，这样访问者的地址就不会被发送给第三方。回复中提到了其他主机的名字，显示为信件。
- **这个盒子** 从第一次渲染开始就有它的大小，所以当图像加载时页面永远不会移动。网站的第一个字母显示在图像加载和没有图像时（服务没有，调用失败，或浏览器无法加载图像）。这个盒子是一个命名的图像(` logo`，或者你的 `alt`）。
- 失败的调用永远不会显示为“no logo”：它会触发 `comms-id-error` （信留在那里）。
## 您自己的标记： `useWebsiteLogo`
```tsx
const logo = useWebsiteLogo({ client, site });
const picture = logo.getImageProps();
return (
{logo.state.monogram}
{picture === undefined ? null : ![]()
}
);
```
`getBoxProps` 使该框成为一个命名图像。 `getImageProps` 在Comms上有图像之前是未定义的。ID主机，携带 `referrerPolicy="no-referrer"` 以及取回信件的错误处理程序。自己设计盒子的样式：给它一个固定的大小。
## 组件
道具: `client` 和 `site` (要求; `site` 可能在你不知道的时候没有定义)， `alt` （默认为“logo”）， `size` （像素，8到512；默认48）， `className`， `onResult`， `onFallback` （`missing`， `blocked` 或者 `failed`)， `onError`， `extraOrigins` （开发主机）。
使用自定义属性对其进行样式化 `--comms-id-text`， `--comms-id-surface`， `--comms-id-border`， `--comms-id-radius` 或者是 `comms-id-website-logo__*` 类名。它不需要样式表。它在服务器上呈现相同的框、名称和字母（没有图像：浏览器要求图像）。
您的内容安全策略需要 `img-src https://api.comms.id` (和 `https://api-test.comms.id` 对于TEST服务)，而没有其他映像主机。
`LICENSE` 是消费者客户牌照。 `src/` 是由 `@comms-id/forge-transformers` 而且从来没有手工编辑过。
## 常见问题
### @comms-id/website-logo-react 是什么？
用于通信的React钩子和组件。ID网站标识字段：网站标识图像，可访问，无布局移位，具有数据属性注意：该包已被作者标记为弃用——Removed\. Comms\.ID products are served live, nothing to install: https://cdn\.comms\.id/website-logo-lookup/latest\.js
### 如何安装 @comms-id/website-logo-react？
在项目目录运行 npm install @comms-id/website-logo-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @comms-id/website-logo-react 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @comms-id/website-logo-react 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @comms-id/website-logo-react 可以商用吗？
@comms-id/website-logo-react 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。
### @comms-id/website-logo-react 还在维护吗？
最新版本 0\.2\.2 发布于 2026/10/21（12 天前）；至今共发布 2 个版本，其中过去 12 个月发布了 2 个；首次发布于 2026/10/21。作者已将其标记为弃用，新项目建议寻找替代方案。