# @adobe/aem-core-components-react-spa 中文文档

规范地址：https://npmcn.com/package/%40adobe/aem-core-components-react-spa/

版本：1\.2\.0
npm 元数据更新时间：2026-10-01T01:31:53.273Z
中文译文更新时间：2026-11-05T21:27:32.402Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40adobe/aem-core-components-react-spa
原文对照：https://npmcn.com/package/%40adobe/aem-core-components-react-spa/?lang=original
项目主页：https://github.com/adobe/aem-react-core-wcm-components-spa/blob/master/README.md
源码仓库：https://github.com/adobe/aem-react-core-wcm-components-spa

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

- 包体积（解压后）：609 kB，96 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^16\.14\.0，@adobe/aem-spa-component-mapping ^1\.1\.1，@adobe/aem-spa-page-model-manager ^1\.3\.11，@adobe/aem-react-editable-components ^1\.1\.5
- 首次发布：2020-07-30T12:46:56.378Z
- 最新版本发布：2021-06-27T06:12:58.484Z
- 近 30 天下载量：18066（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 0 个）

## 中文简介

AEM Spa 编辑器 - AEM 核心组件的响应执行

## 安装

```sh
npm install @adobe/aem-core-components-react-spa
```

也可以使用：`pnpm add @adobe/aem-core-components-react-spa`、`yarn add @adobe/aem-core-components-react-spa`、`bun add @adobe/aem-core-components-react-spa`

## README

# AEM WCM 组件 - Spa编辑器 - React Core 执行

本单元为集装箱提供反应执行 [AEM 核心组件](https://www.aemcomponents.dev/)。 。 。 . 这只与 [AEM SPA 编辑器](https://docs.adobe.com/content/help/en/experience-manager-64/developing/headless/spas/spa-overview.html)。 。 。 .

[视频和演示](https://www.youtube.com/watch?v=9759AhM7fAc)

当前支持/ 导出组件 :

### 集装箱

-   手风琴(V1)
-   木马(V1)
-   集装箱(V1)
-   标签( V1)

### 抽象

-   抽象染色体组件

## 使用量

您可以选择立即导入整个库 OR 单独导入组件 . 后者是有用的,如果您想要启用一些组件,并且您想要保存您的 Javascript 脚印. 另外,如果想要加载所有的核心组件,但是要用反应悬念来懒地加载,则需要单独导入.

### 导入整个库 :

```
import * as SpaCoreComponents from "@adobe/aem-core-components-react-spa";
const {CarouselV1, CarouselV1IsEmptyFn} = BaseCoreComponents;
```

### 单独导入 CaouselV1 组件:

```
import {CarouselV1, CarouselV1IsEmptyFn} from "@adobe/aem-core-components-react-spa/dist/container/carousel/v1/CarouselV1";
```

### 使用导入代码

既然您已经导入了 CaouselV1 和 CaouselV1 IsEmptyFn, 您可以在您的工程中使用它们 . 1上的按钮1的属性对应了斯林模型输出器(.model.json)输出.

注:有些例外,有些额外的属性被添加(主要是i18n标签),目前在OOTB sling模型导出中并不存在. 这些项目可以由项目本身加上授权。 如果它们不存在,则会使用默认值(英文).

#### Carousel - 温泉编辑器示例 :

```
MapTo('my-project/wcm/components/containers')(CarouselV1, {isEmpty: CarouselV1IsEmptyFn});
```

关于完整的项目,请访问 [github 页面](https://github.com/adobe/aem-react-core-wcm-components/tree/master/examples)。 。 。 .

## 常见问题

### @adobe/aem-core-components-react-spa 是什么？

AEM Spa 编辑器 - AEM 核心组件的响应执行

### 如何安装 @adobe/aem-core-components-react-spa？

在项目目录运行 npm install @adobe/aem-core-components-react-spa，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.14\.0）、@adobe/aem-spa-component-mapping（^1\.1\.1）、@adobe/aem-spa-page-model-manager（^1\.3\.11）、@adobe/aem-react-editable-components（^1\.1\.5）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @adobe/aem-core-components-react-spa 支持 TypeScript 吗？

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

### @adobe/aem-core-components-react-spa 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @adobe/aem-core-components-react-spa 可以商用吗？

@adobe/aem-core-components-react-spa 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @adobe/aem-core-components-react-spa 的下载量有多少？

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

### @adobe/aem-core-components-react-spa 还在维护吗？

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