# @cucumber/react-components 中文文档

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

版本：24\.5\.0
npm 元数据更新时间：2026-09-28T08:28:40.089Z
中文译文更新时间：2026-11-11T04:35:03.791Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：530 kB，283 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：23 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2022-04-12T11:47:52.182Z
- 最新版本发布：2026-09-28T08:28:39.691Z
- 近 30 天下载量：5131（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：29（近 12 个月 9 个）

## 中文简介

木瓜的反应组件

## 安装

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

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

## README

# @ cucumber/ react- 组件

> 一组用于渲染Gherkin文档和Cucumber结果的回放组件.

预览和实例 :  
[https://react-communctions-9pg.pages.dev/ 互联网档案馆的存檔,存档日期2014-12-02](https://react-components-9pg.pages.dev/)

![Examples Tables](https://npmcn.com/package/%40cucumber/react-components/screenshots/examples-tables.png)

## 使用量

-   此软件包仅以ES模块格式分发.
-   需要反应18或以上.

上面截图的源代码是:

```jsx
import { EnvelopesProvider, FilteredDocuments } from '@cucumber/react-components'

<EnvelopesProvider envelopes={envelopes}>
  <FilteredDocuments />
</EnvelopesProvider>
```

`envelopes` 应为 [木瓜信件](https://github.com/cucumber/messages) 这来自测试运行。 您可以通过使用“ Message” 来获取这些 .

## 附录

测试运行中的附件会显示相应的步骤。 附件的基准行为是一个下载按钮. 然而,我们对常见的MIME类型有一些特殊的处理方法,使它们在不留下报告的情况下更有用:

-   `image/*` - 图像是用 `<img/>` 标签
-   `video/*` - 视频是用 `<video/` 标签
-   `text/x.cucumber.log+plain` - 日志(从呼叫到 `log` 函数在 Cucumber) 中作为单空间文本提供,并支持 ANSI 颜色
-   `text/uri-list` - 一个或多个 URL 作为链接在新标签中打开
-   `application/json` - JSON是作为单空间文本并预设的
-   `text/*` - 其他文本类型作为单空间文本提供

## 样式

标准型号的来历没有任何额外的提供者或配置. 有几种方法可以对组件应用不同的样式.

### 他们

可以提供少量CSS来提供自己的主题. 瞄准您最高水平使用组件以上的元素:

```jsx
<div className="dark-theme">
  <EnvelopesProvider envelopes={envelopes}>
    <FilteredDocuments />
  </EnvelopesProvider>
</div>
```

在您的 CSS 中, 您可以设置背景和文字颜色, 并覆盖所支持的 [自定义属性](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) 所希望的数值:

```css
.dark-theme {
  background-color: #1d1d26;
  color: #c9c9d1;
  --cucumber-anchor-color: #4caaee;
  --cucumber-keyword-color: #d89077;
  --cucumber-parameter-color: #4caaee;
  --cucumber-tag-color: #85a658;
  --cucumber-docstring-color: #66a565;
  --cucumber-error-background-color: #cf6679;
  --cucumber-error-text-color: #222;
  --cucumber-code-background-color: #282a36;
  --cucumber-code-text-color: #f8f8f2;
  --cucumber-panel-background-color: #282a36;
  --cucumber-panel-accent-color: #313442;
  --cucumber-panel-text-color: #f8f8f2;
}
```

### 自定义样式

要对造型进行更多的控制,您可以覆盖单个组件使用的CSS.

假设你想做一些完全不同的 与医生字符串的打字。 在你自己的CSS中,你可能会写出诸如:

```css
.acme-docstring {
  font-weight: bold;
  font-style: italic;
  background-color: black;
  color: hotpink;
  text-shadow: 1px 1px 2px white;
  padding: 10px;
}
```

然后,你可以提供 `overrides` 给 `CustomRendering` 组件,其形式为: 宣布您要覆盖哪个类名称以及使用什么对象:

```jsx
<CustomRendering overrides={{
  DocString: {
    docString: 'acme-docstring'
  }
}}>
  <EnvelopesProvider envelopes={envelopes}>
    <FilteredDocuments />
  </EnvelopesProvider>
</CustomRendering>
```

有些部件有多种型式钩子——例如: `<Tags>` 组件有: `tags` 列表的分类名称,以及 `tag` 每个项目的分类名称。 在这种情况下,你可以只提供您想要更改的自定义类名称,任何省略的都会像正常一样取出内置的样式.

### 自定义渲染

要完全改变某些组件的渲染,你可以有选择地提供自己的组件执行,而不是内置执行.

保留 Doc 字符串示例, 您可以使用相同的 `overrides` 道具,但这次你不是提供类名的对象,而是提供反应功能组件,赋予你对渲染的全部控制:

```jsx
<CustomRendering overrides={{
  DocString: (props) => (
    <>
      <p>I am going to render this doc string in a textarea:</p>
      <textarea>{props.docString.content}</textarea>
    </>
  )
}}>
  <EnvelopesProvider envelopes={envelopes}>
    <FilteredDocuments />
  </EnvelopesProvider>
</CustomRendering>
```

在提供自有组件的每一种情况下,它都会得到与默认组件相同的道具,加上两个:

-   `styles` - 默认样式的类名称, 如果有道理, 您仍可将这些名称应用到您的自定义组件中
-   `DefaultRenderer` - 默认反射组件, 有用, 如果您只想为某些情况提供自己的渲染, 否则会回到默认渲染( 不要忘记通过道具)

## 常见问题

### @cucumber/react-components 是什么？

木瓜的反应组件

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

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

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

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

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

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

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

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

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

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

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

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