# @bettercms-ai/react 中文文档
规范地址：https://npmcn.com/package/%40bettercms-ai/react/
版本：0\.5\.0
npm 元数据更新时间：2026-11-05T14:15:31.483Z
中文译文更新时间：2026-11-08T00:54:51.502Z
软件包许可：未声明
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40bettercms-ai/react
原文对照：https://npmcn.com/package/%40bettercms-ai/react/?lang=original
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：37.4 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react \>=18
- 首次发布：2026-10-18T20:02:15.891Z
- 最新版本发布：2026-11-05T14:15:31.190Z
- 近 30 天下载量：2073（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 12 个）
## 中文简介
BetterCMS for React Apps (Vite和其他客户端的React):提供商,钩子,通过链接的草稿模式,以及部分和字段组件.
## 安装
```sh
npm install @bettercms-ai/react
```
也可以使用：`pnpm add @bettercms-ai/react`、`yarn add @bettercms-ai/react`、`bun add @bettercms-ai/react`
## README
# @ bettercms-ai/ 反应
更好的CMS用于客户端的Reactapps(Vite, CRA,任何SPA). 用于下一个.js 使用 `@bettercms-ai/next`,用于Astro `@bettercms-ai/astro`。 。 。 .
```bash
npm i @bettercms-ai/react
```
```env
VITE_BCMS_API_URL=https://api.bettercms.ai
VITE_BCMS_WORKSPACE=your-workspace
VITE_BCMS_PROJECT_ID=your-project-id
```
```tsx
// main.tsx
import { BcmsProvider } from "@bettercms-ai/react";
createRoot(el).render();
// a page
import { BcmsBlocks, usePage, useComponents } from "@bettercms-ai/react";
export function Home() {
const { data: page } = usePage("home");
const { data: components } = useComponents();
return page ? : null;
}
```
钩子: `usePage(slug)`, (中文(简体) ), `useEntry(slug)`, (中文(简体) ), `useEntries(opts)`, (中文(简体) ), `useLayout()`, (中文(简体) ), `useComponents()`, (中文(简体) ), `useBcmsQuery(key, read)`; 每个返回 `{ data, error, loading }`。 。 。 .
组件(与 `@bettercms-ai/next`: `BcmsBlocks`, (中文(简体) ), `BcmsSections` (内部) `` 而给予否 `blocks`, (中文(简体) ), `` 阅读页面的顺序本身,所以应用程序的自有部分按CMS页面列出的顺序来渲染, `BcmsSection`, (中文(简体) ), `BcmsField`, (中文(简体) ), `BcmsImage`, (中文(简体) ), `BcmsButton`, (中文(简体) ), `BcmsForm`, (中文(简体) ), `BcmsSearch`,以及 `BcmsDraftBridge`,使编辑器重新提交带有自己组件的草稿.
## 自己的组件, 可编辑
在您自己的元素上传播绑定, 而视觉编辑器会绑定它们 :
```tsx
import { entryAttrs, entryField, fieldAttrs, sectionRootAttrs } from "@bettercms-ai/react";
{title}
{post.data.title}
```
## 现场直播
发布内容时每个钩子重读( pass) `liveSrc`,或设置 `VITE_BCMS_LIVE_URL`)),而当视觉编辑器要求页面重新投稿时. 重读时将当前页面保留在屏幕上,直到新数据到达. `useBcms().refresh()` 依需要重读. 在草稿模式下,供应商还印有邮票 `` 并加载单击到编辑的覆盖.
## 草稿模式
不需要服务器 。 编辑器的"现场评论"链接打开 `/api/draft?token=…&redirect=/page` 在您的网站上; 一个 SPA 主机服务您的应用程序,以及 `` 使用 BetterCMS 检查符号, 保存它作为标签并移动到 `redirect`。阅读后返回草稿. `useBcms().exitDraft()` 离开草稿模式。 设定 `draftPath` 如果您的应用程序使用其他路径( 以及项目集成设置中的相同路径) , 则在提供者上.
您的主机必须在该路径上为应用程序服务, 就像它对任何客户端的路由一样: Netlify `/* /index.html 200` 内 `_redirects`,一个Vercel重写 `/api/draft` 改为 `/index.html` (维塞尔保持 `/api` 用于其他职能)和 `vite dev` 没有代理 `/api`。 GitHub 页面无法重写: set `draftPath` 您的应用服务路径`/draft`)和集成设置中相同的路径。 后端拒绝的指使,或无法到达的检查,都会让应用程序被发布;下一次应用程序加载时会丢出过期的指使.
## 常见问题
### @bettercms-ai/react 是什么？
BetterCMS for React Apps \(Vite和其他客户端的React\):提供商,钩子,通过链接的草稿模式,以及部分和字段组件\.
### 如何安装 @bettercms-ai/react？
在项目目录运行 npm install @bettercms-ai/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @bettercms-ai/react 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @bettercms-ai/react 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @bettercms-ai/react 可以商用吗？
@bettercms-ai/react 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。
### @bettercms-ai/react 的下载量有多少？
根据 npm 官方下载统计，@bettercms-ai/react 在 2026/10/08 – 2026/11/06 这 30 天内被下载 2,073 次，日均约 69 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @bettercms-ai/react 还在维护吗？
最新版本 0\.5\.0 发布于 2026/11/05（2 天前）；至今共发布 12 个版本，其中过去 12 个月发布了 12 个；首次发布于 2026/10/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。