# @cmssy/react 中文文档

规范地址：https://npmcn.com/package/%40cmssy/react/

版本：19\.30\.0
npm 元数据更新时间：2026-11-06T09:04:10.756Z
中文译文更新时间：2026-11-10T04:23:47.717Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40cmssy/react
原文对照：https://npmcn.com/package/%40cmssy/react/?lang=original
项目主页：https://cmssy.com/
源码仓库：https://github.com/cmssy-io/cmssy-sdk

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

- 包体积（解压后）：256 kB，30 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：2 个
- peer 依赖：react ^18\.2\.0 \|\| ^19\.0\.0
- 首次发布：2026-06-06T20:28:06.208Z
- 最新版本发布：2026-11-06T09:04:10.286Z
- 近 30 天下载量：7164（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：222（近 12 个月 222 个）

## 中文简介

Cmsy 无头站点的数据客户端和编辑桥

## 安装

```sh
npm install @cmssy/react
```

也可以使用：`pnpm add @cmssy/react`、`yarn add @cmssy/react`、`bun add @cmssy/react`

## README

# @ cmsy/ 反应

反应构件 [学问](https://cmssy.com/) 无头站点:定义 块、 渲染已发布的内容、 从公开发送的 API 获取数据,以及 开活编辑桥. 框架不可知反应; 对于 Next.js App 路由器 线路使用 [`@cmssy/next`](https://www.npmjs.com/package/@cmssy/next)。 。 。 .

```bash
pnpm add @cmssy/react
```

## 定义块

块是普通反应组件,加上编辑器读取的场图.

```tsx
import { defineBlock, fields } from "@cmssy/react";
import Hero from "./Hero";

export const heroBlock = defineBlock({
  type: "hero",
  label: "Hero",
  component: Hero,
  props: {
    heading: fields.singleLine({ label: "Heading", required: true }),
    subheading: fields.multiLine({ label: "Subheading" }),
    cta: fields.link({ label: "CTA" }),
    image: fields.media({ label: "Image" }),
  },
});
```

`fields` 覆盖 `singleLine`, (中文(简体) ), `multiLine`, (中文(简体) ), `link`, (中文(简体) ), `media`, (中文(简体) ), `boolean`, (中文(简体) ), `repeater`还有更多 块组件收到 `{ content }` 从 cMS在运行时间.

## 已发布的内容

```tsx
import { fetchPage, CmssyServerPage } from "@cmssy/react";

const page = await fetchPage(
  { org: "acme-org", workspaceSlug: "acme" },
  pathSegments,
);

return <CmssyServerPage page={page} blocks={blocks} locale="en" />;
```

`CmssyServerLayout` 使页眉/页脚布局组相同。 两者都是 服务器组件 — 除非块需要, 没有块 JavaScript 船到客户端 这个.

## 获取数据

一个通用的 GraphQL 客户端在公共 API 上—— 写你自己的查询( 或使用) 出口文件:

```ts
import { createCmssyClient, MODEL_RECORDS_QUERY } from "@cmssy/react";

const cmssy = createCmssyClient({ org: "acme-org", workspaceSlug: "acme" });

// raw query (you own scoping)
await cmssy.query(MY_QUERY, vars);

// workspace-scoped (auto x-workspace-id header + $workspaceId var)
const {
  public: {
    model: { records },
  },
} = await cmssy.queryScoped(MODEL_RECORDS_QUERY, {
  modelSlug: "posts",
});
```

已准备好的文件+结果类型: `SITE_CONFIG_QUERY`, (中文(简体) ), `MODEL_DEFINITIONS_QUERY`, (中文(简体) ), `MODEL_RECORDS_QUERY`, (中文(简体) ), `FORM_QUERY`, (中文(简体) ), `SUBMIT_FORM_MUTATION`。 。 。 .

## 现场编辑器( 客户端)

`@cmssy/react/client` 曝光懒惰编辑器 + 保持屏蔽的布局包 孤立块 :

```tsx
"use client";
import { CmssyLazyEditor } from "@cmssy/react/client";

export const CmssyEditor = (props) => (
  <CmssyLazyEditor {...props} load={() => import("./blocks")} />
);
```

编辑们和Cmssy管理员谈了一下 `cmssy:*` 实时桥接协议 预览.

## 版本: 此软件包, 不是 API

**固定此套件不会将它所讲的API 绑起 .** 软件包版本 包括这个客户 - 其出口及其行为,正常的铸币. 阴道 aPI是一个主机服务,其GraphQL计划可以在任何部署上改变, 在这儿没有释放权.

API 版本没有日期标注; 发送端没有版本 部分。 今天保护你的是 断裂的策略改变不能合并 沉默地 - 它被一个能验证SDK自身操作的门抓住 无论如何,运输一个需要记录 批准 - 而我们打算 删除已标记 `@deprecated` 先说 没有保证的折旧窗口 并且没有最低的通知期。 详细情况 [`@cmssy/core`](https://www.npmjs.com/package/@cmssy/core)。 。 。 .

## 许可证

麻省理工学院

## 常见问题

### @cmssy/react 是什么？

Cmsy 无头站点的数据客户端和编辑桥

### 如何安装 @cmssy/react？

在项目目录运行 npm install @cmssy/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.2\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cmssy/react 支持 TypeScript 吗？

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

### @cmssy/react 支持 ESM 还是 CommonJS？

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

### @cmssy/react 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @cmssy/react 可以商用吗？

@cmssy/react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cmssy/react 的下载量有多少？

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

### @cmssy/react 还在维护吗？

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