# @carbonorm/carbonreact 中文文档

规范地址：https://npmcn.com/package/%40carbonorm/carbonreact/

版本：6\.0\.5
npm 元数据更新时间：2026-10-21T15:31:24.816Z
中文译文更新时间：2026-11-09T06:03:13.229Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40carbonorm/carbonreact
原文对照：https://npmcn.com/package/%40carbonorm/carbonreact/?lang=original
项目主页：https://github.com/CarbonORM/CarbonReact#readme
源码仓库：https://github.com/CarbonORM/CarbonReact

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

- 包体积（解压后）：3 MB，109 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：18 个
- peer 依赖：react ^19\.1\.0，react-dom ^19\.1\.0
- 首次发布：2023-07-27T23:16:31.346Z
- 最新版本发布：2026-10-21T15:31:24.286Z
- 近 30 天下载量：5199（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：120（近 12 个月 7 个）

## 中文简介

![npm](https://img.shields.io/npm/v/%40carbonorm%2Fcarbonreact) ![License](https://img.shields.io/npm/l/%40carbonorm%2Fcarbonreact) ![Size](https://img.shields.io/github/languages/code-size/carbonorm/carbonreact) \[文档\] ([https://img.shields.io/we (英语)](https://img.shields.io/we)

## 安装

```sh
npm install @carbonorm/carbonreact
```

也可以使用：`pnpm add @carbonorm/carbonreact`、`yarn add @carbonorm/carbonreact`、`bun add @carbonorm/carbonreact`

## README

![npm](https://img.shields.io/npm/v/%40carbonorm%2Fcarbonreact) ![License](https://img.shields.io/npm/l/%40carbonorm%2Fcarbonreact) ![Size](https://img.shields.io/github/languages/code-size/carbonorm/carbonreact) ![Documentation](https://img.shields.io/website?down_color=lightgrey&down_message=Offline&up_color=green&up_message=Online&url=https%3A%2F%2Fcarbonorm.miles.systems%2F) ![Monthly Downloads](https://img.shields.io/npm/dm/%40carbonorm%2Fcarbonreact) ![All Downloads](https://img.shields.io/npm/dt/%40carbonorm%2Fcarbonreact) ![Star](https://img.shields.io/github/stars/carbonorm/carbonreact?style=social)

# 碳反应

CarbonReact是CarbonORM系列的一部分. 它是一种反应MySQL ORM,它设计用来生成所有你的锅炉板 代码.

## 安装

碳反应在 [国家预防机制](https://www.npmjs.com/)。你会需要 [节点JS](https://nodejs.org/en/) 已安装 预装 npm (节点包管理器) .

```bash
npm install @carbonorm/carbonreact
```

## 生成模型

以下命令生成单个 `C6.ts` 包含表格、类型和 REST 绑定的文档。 保留输出 服务器和客户端的版本控制和导入。 所有论据都是可选的。 如果你不给他们提供 将使用默认值。 下面的例子参数为默认.

```bash
npx generateRestBindings --user root --pass password --host 127.0.0.1 --port 3306 --dbname carbonPHP --prefix carbon_ --output ./shared/rest/C6.ts
```

生成的文件导出 `C6`, (中文(简体) ), `GLOBAL_REST_PARAMETERS`,和每表绑定物(例如:. `Users`:

```typescript
import { C6, GLOBAL_REST_PARAMETERS, Users } from "./shared/rest/C6";
```

您可以在 [碳节点](https://github.com/CarbonORM/CarbonNode/blob/main/scripts/generateRestBindings.ts)我们使用 [处理栏模板](https://mustache.github.io/) 生成代码.

关于碳节点及其世代的更多信息,请参见 [碳节点](https://github.com/CarbonORM/CarbonNode)。 。 。 .

## 快速启动执行

碳反应被设计为您的应用的诱饵。 它负责管理你申请的状态. 最理想的是,一旦它挂起,它就永远不会被卸下. 在无法申请的情况下,您可提供 `shouldStatePersist` 属性到碳反应反应组件。 这将允许你坚持你的状态 应用程序,即使组件已卸载。 当组件是时访问或更新状态的行为 未知(未定义),应当避免。 下面的例子显示了碳反应的简单实施. 我们的用户 定义组件为 `CarbonORM` 用于扩展 `CarbonReact` 课。 您的落实也必须 扩展 `CarbonReact`名称 `CarbonORM` 是任意的,可以更改为应用程序的名称.

[索引.tsx](https://github.com/CarbonORM/CarbonORM.dev/blob/www/src/index.tsx)

```typescript

import 'react-toastify/dist/ReactToastify.min.css'; // This is required for alerts to work and not break styling

const container = document.getElementById('root');

const root = createRoot(container!);

root.render(
    <React.StrictMode>
        <CarbonORM />
    </React.StrictMode>
);
```

CarbonReact应该在页面加载后立即加载. 有计划允许使用其他警报系统,但 现在,我们使用 [反应托拉斯化](https://www.npmjs.com/package/react-toastify)。必须在您的文件中需要它 并且通常可以完成您的项目的根.

[碳ORM.tsx](https://github.com/CarbonORM/CarbonORM.dev/blob/www/src/CarbonORM.tsx)

```typescript


export const initialCarbonORMState: typeof initialRestfulObjectsState
    & typeof initialRequiredCarbonORMState
    & iAuthenticate
    & iVersions
    & iUi
    & {} = {
    ...initialVersionsState,
    ...initialRestfulObjectsState,
    ...initialRequiredCarbonORMState,
    ...initialAuthenticateState,
    ...initialUiState,
}

export default class CarbonORM extends CarbonReact<{ browserRouter?: boolean }, typeof initialCarbonORMState> {

    static instance: CarbonORM;

    state = initialCarbonORMState;

    constructor(props) {
        super(props);
        CarbonORM.instance = this;
        CarbonReact.instance = this;
    }

    componentDidMount() {
        Carbons.Get()
        authenticateUser()
    }

    render() {
        console.log("CarbonORM TSX RENDER");

        const {isLoaded, backendThrowable} = this.state;


        if (backendThrowable.length > 0) {

            return <BackendThrowable />

        }

        const reactRouterContext = (children: any) => {

            if (isTest) {

                return <MemoryRouter initialEntries={['/']}>{children}</MemoryRouter>

            }

            return <HashRouter>{children}</HashRouter>

        }

        return reactRouterContext(<>
            <Routes>
                <Route path={UI + "*"}>
                    <Route path={MATERIAL_DASHBOARD + "*"} element={ppr(Dashboard, {})}>
                        <Route path={DASHBOARD + '*'} element={ppr(DashboardPage, {})}/>
                        <Route path={USER_PROFILE + '*'} element={ppr(UserProfile, {})}/>
                        <Route path={TABLES + '*'} element={ppr(TableList, {})}/>
                        <Route path={TYPOGRAPHY + '*'} element={ppr(Typography, {})}/>
                        <Route path={ICONS + '*'} element={ppr(Icons, {})}/>
                        <Route path={MAPS + '*'} element={ppr(Maps, {})}/>
                        <Route path={NOTIFICATIONS + '*'} element={ppr(Notifications, {})}/>
                        <Route path={UPGRADE_TO_PRO + '*'} element={ppr(UpgradeToPro, {})}/>
                        <Route path={'*'} element={<Navigate to={'/' + UI + MATERIAL_DASHBOARD + DASHBOARD}/>}/>
                    </Route>
                    <Route path={MATERIAL_KIT + "*"} element={ppr(MaterialKit, {})}>
                        <Route path={SECTION_NAVBARS + '*'} element={ppr(SectionNavbars, {})}/>
                        <Route path={SECTION_BASICS + '*'} element={ppr(SectionBasics, {})}/>
                        <Route path={SECTION_TABS + '*'} element={ppr(SectionTabs, {})}/>
                        <Route path={SECTION_PILLS + '*'} element={ppr(SectionPills, {})}/>
                        <Route path={SECTION_NOTIFICATIONS + '*'} element={ppr(SectionNotifications, {})}/>
                        <Route path={SECTION_TYPOGRAPHY + '*'} element={ppr(SectionTypography, {})}/>
                        <Route path={SECTION_JAVASCRIPT + '*'} element={ppr(SectionJavascript, {})}/>
                        <Route path={SECTION_COMPLETED_EXAMPLES + '*'} element={ppr(SectionCompletedExamples, {})}/>
                        <Route path={SECTION_LOGIN + '*'} element={ppr(SectionLogin, {})}/>
                        <Route path={LANDING_PAGE + '*'} element={ppr(LandingPage, {})}/>
                        <Route path={SECTION_DOWNLOAD + '*'} element={ppr(SectionDownload, {})}/>
                        <Route path={'*'} element={<Navigate to={'/' + UI + MATERIAL_KIT + SECTION_NAVBARS}/>}/>
                    </Route>
                    <Route path={'*'} element={<Navigate to={'/' + UI + MATERIAL_DASHBOARD}/>}/>
                </Route>
                <Route path={DOCUMENTATION + '*'} element={ppr(Documentation, {})}>
                    <Route path={CARBON_ORM_INTRODUCTION + '*'} element={ppr(CarbonORMIntroduction, {})}/>
                    <Route path={SUPPORT + '*'} element={ppr(Support, {})}/>
                    <Route path={CARBONPHP + '*'} element={ppr(CarbonPHP, {})}/>
                    <Route path={DEPENDENCIES + '*'} element={ppr(Dependencies, {})}/>
                    <Route path={CHANGELOG + "*"} element={ppr(Changelog, {})}/>
                    <Route path={IMPLEMENTATIONS + "*"} element={ppr(Implementations, {})}/>
                    <Route path={LICENSE + "*"} element={ppr(License, {})}/>
                    <Route path={'*'} element={<Navigate to={'/' + DOCUMENTATION + CARBON_ORM_INTRODUCTION}/>}/>
                </Route>
                <Route path="/landing-page" element={ppr(LandingPage, {})}/>
                <Route path={'*'} element={<Navigate to={'/documentation'}/>}/>
            </Routes>
            <ToastContainer
                autoClose={3000}
                draggable={false}
                position="top-right"
                hideProgressBar={false}
                newestOnTop
                closeOnClick
                rtl={false}
                pauseOnHover
            />
        </>)

    }
}
```

## Websocket 更新( 可选)

后端:在每个写作(POST/PUT/DELETE)上广播由CarbonNode生成的有效载荷.

```typescript
import { GLOBAL_REST_PARAMETERS } from "./shared/rest/C6";

GLOBAL_REST_PARAMETERS.websocketBroadcast = (payload) => {
    wsServer.broadcast(JSON.stringify(payload));
};
```

前端: 通过 `C6` 输入CarbonReact,这样websocket客户端就可以使更新正常化,并且只在行时应用它们 已经在当地州。 除错日志仅在 `VERBOSE` 已启用.

```typescript
import { C6 } from "./shared/rest/C6";

root.render(
    <React.StrictMode>
        <CarbonORM websocket={{ C6, url: "ws://localhost:8888/carbonorm/websocket" }} />
    </React.StrictMode>
);
```

我们的测试工具 [欢乐](https://www.npmjs.com/package/jest) 需求 [反应路由器 Dom](https://www.npmjs.com/package/react-router-dom) 进入 `MemoryRouter` 模式。 这是因为杰斯特没有DOM,因此不能使 `HashRouter` 或者说 `BrowserRouter` 组件。 碳反应不需要 `React Router Dom` 将安装。 您可以使用任何路由器 喜欢。 上面的例子使用了 `HashRouter` 这是 [由于网站的需要](https://stackoverflow.com/questions/71984401/react-router-not-working-with-github-pages) 免费使用主机 [GitHub 页面](https://pages.github.com/)。 。 。 .

名为文件夹 [状态](https://github.com/CarbonORM/CarbonORM.dev/tree/www/src/state) 在您的项目根 `src/state/` 应当包含您所有的状态文件。 这些文件的编写目的应该是要导入 输入您的碳反应扩展组件。 下面的例子显示了上面执行的简单状态文件. 帮助 函数也包含在国家文件中。 这些函数被设计为用于您的 React 组件 。 反应 状态操作必须被一个函数所包裹,因此在初始的页面加载时不能运行.

更新状态与调用一样简单 `CarbonORM.instance.setState({})`分类名称 `CarbonORM` 可替换为 任何你喜欢的名字。 通常情况下,您会想要使用您的工程名称 .

[(简体中文)](https://github.com/CarbonORM/CarbonORM.dev/blob/www/src/state/ui.tsx)

```typescript
import CarbonORM from "CarbonORM";


export interface iUi {
    pureWordpressPluginConfigured?: boolean,
    documentationVersionURI: string,
    isLoaded: boolean,
    darkMode: boolean,
}

export const initialUiState: iUi = {
    pureWordpressPluginConfigured: false,
    documentationVersionURI: '0.0.0',
    isLoaded: false,
    darkMode: true,
}


export const switchDarkAndLightTheme = () => {
    CarbonORM.instance.setState({
        darkMode: !CarbonORM.instance.state.darkMode
    });
};
```

## 常见问题

### @carbonorm/carbonreact 是什么？

\[文档\] \(https://img\.shields\.io/we \(英语\)

### 如何安装 @carbonorm/carbonreact？

在项目目录运行 npm install @carbonorm/carbonreact，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.1\.0）、react-dom（^19\.1\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 compileValidSQL，可以用 npx compileValidSQL 直接运行。

### @carbonorm/carbonreact 支持 TypeScript 吗？

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

### @carbonorm/carbonreact 支持 ESM 还是 CommonJS？

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

### @carbonorm/carbonreact 可以商用吗？

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

### @carbonorm/carbonreact 的下载量有多少？

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

### @carbonorm/carbonreact 还在维护吗？

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