# @canonical/react-components 中文文档

规范地址：https://npmcn.com/package/%40canonical/react-components/

版本：4\.16\.3
npm 元数据更新时间：2026-11-09T09:58:13.428Z
中文译文更新时间：2026-11-09T01:10:50.140Z
软件包许可：LGPL-3\.0

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

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

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

- 包体积（解压后）：1.9 MB，1445 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：10 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，formik ^2\.4\.5，react-dom ^18\.0\.0 \|\| ^19\.0\.0，@types/react ^18\.0\.0 \|\| ^19\.0\.0，@types/react-dom ^18\.0\.0 \|\| ^19\.0\.0，vanilla-framework ^3\.15\.1 \|\| ^4\.0\.0
- 首次发布：2019-11-03T07:00:20.159Z
- 最新版本发布：2026-11-09T09:58:13.037Z
- 近 30 天下载量：44611（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：229（近 12 个月 56 个）

## 中文简介

![CI](https://github.com/canonical/react-components/workflows/CI/badge.svg?branch=main)

## 安装

```sh
npm install @canonical/react-components
```

也可以使用：`pnpm add @canonical/react-components`、`yarn add @canonical/react-components`、`bun add @canonical/react-components`

## README

# 香草框架的响应组件

![CI](https://github.com/canonical/react-components/workflows/CI/badge.svg?branch=main)

这是一组组件 设计成消费的方式 [香草框架](http://vanillaframework.io/) 当使用 React 时。 该图书馆披露了一个CJS和一个无害环境管理系统.

**[故事书](https://canonical.github.io/react-components/)** 包含含有使用指令的组件文件.

## 所需资源

Canonical 反应组件目前需要您的构建配置 [自动装填器](https://github.com/webpack-contrib/sass-loader) (或等同),以编译 Sass.

## 安装

用来使用 [国家防范机制一揽子计划](https://www.npmjs.com/package/@canonical/react-components) ưμ㼯a

```shell
yarn add @canonical/react-components
```

或者如果你使用国家预防机制:

```shell
npm install @canonical/react-components
```

## 问题

请在 [GitHub 图像](https://github.com/canonical/react-components/issues)。 。 。 .

## 捐款

你可能会想:

-   [查看来源](https://github.com/canonical/react-components) (原始内容存档于2018-09-29). on GitHub.
-   阅读 [开发组件](https://npmcn.com/package/%40canonical/react-components/HACKING.md)。 。 。 .

## 使用此寄存器开发本地

您不妨在本地开发时将此库直接链接到您的项目 .

您可以将此重播复制到本地工作区:

```shell
git clone https://github.com/canonical/react-components
```

如果您再掉入文件夹并运行 :

```shell
yarn run link-packages
```

...这会增加这个项目, `react` 财务报告和审定财务报表 `react-dom` 在本地的线条注册.

切换到您正在开发的项目, 运行 :

```shell
yarn install
yarn link react
yarn link react-dom
yarn link @canonical/react-components
```

...从本地注册处取出链接的道具。 如果你现在运行 `yarn build-watch` 在你身边 `react-components` 文件夹中,您的工程在刷新或热模块重新装入时应当抓取任何更改 .

**说明:** 当你们完成本地工作时... 别忘了回去脱钩:

```
cd react-components
yarn run unlink-packages
```

## 相关项目

下列项目与该图书馆有关,或以该图书馆为基础:

-   [存储组件](https://github.com/canonical/store-components)
-   [MAAS 反应组件](https://github.com/canonical/maas-react-components)

## 常见问题

### 如何安装 @canonical/react-components？

在项目目录运行 npm install @canonical/react-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、formik（^2\.4\.5）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）、@types/react（^18\.0\.0 \|\| ^19\.0\.0）、@types/react-dom（^18\.0\.0 \|\| ^19\.0\.0）、vanilla-framework（^3\.15\.1 \|\| ^4\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @canonical/react-components 支持 TypeScript 吗？

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

### @canonical/react-components 支持 ESM 还是 CommonJS？

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

### @canonical/react-components 可以商用吗？

@canonical/react-components 使用 LGPL-3\.0 许可。弱 Copyleft：作为库被调用时通常不要求开源你自己的代码，但修改库本身需以 LGPL 开源；前端打包合并后的适用边界存在不同理解。以上为概括，不构成法律意见，请以许可原文为准。

### @canonical/react-components 的下载量有多少？

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

### @canonical/react-components 还在维护吗？

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