# @contentful/rich-text-react-renderer 中文文档

规范地址：https://npmcn.com/package/%40contentful/rich-text-react-renderer/

版本：16\.2\.2
npm 元数据更新时间：2026-07-23T06:55:19.909Z
中文译文更新时间：2026-11-10T16:35:54.704Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：152 kB，79 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.0\.0
- 运行依赖：1 个
- peer 依赖：react ^16\.8\.6 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^16\.8\.6 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2019-02-11T16:23:07.363Z
- 最新版本发布：2026-07-23T06:55:19.702Z
- 近 30 天下载量：3030737（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：77（近 12 个月 3 个）

## 中文简介

内容丰富的文本字段类型的反应渲染器.

## 安装

```sh
npm install @contentful/rich-text-react-renderer
```

也可以使用：`pnpm add @contentful/rich-text-react-renderer`、`yarn add @contentful/rich-text-react-renderer`、`bun add @contentful/rich-text-react-renderer`

## README

# 富文本- 反应- 提交者

内容丰富的文本字段类型的反应渲染器.

## 安装

使用 [无](http://npmjs.org/)数字 :

```sh
npm install @contentful/rich-text-react-renderer
```

使用 [线条](https://yarnpkg.com/)数字 :

```sh
yarn add @contentful/rich-text-react-renderer
```

## 使用量

```javascript
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  data: {},
  content: [
    {
      nodeType: 'paragraph',
      data: {},
      content: [
        {
          nodeType: 'text',
          value: 'Hello world!',
          marks: [],
          data: {},
        },
      ],
    },
  ],
};

documentToReactComponents(document); // -> <p>Hello world!</p>
```

```javascript
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }],
        },
      ],
    },
  ],
};

documentToReactComponents(document);
// -> <p><b>Hello</b><u> world!</u></p>
```

也可以通过标记和节点的自定义渲染器作为这样的可选参数:

```javascript
import { BLOCKS, MARKS } from '@contentful/rich-text-types';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }],
        },
      ],
    },
  ],
};

const Bold = ({ children }) => <p className="bold">{children}</p>;

const Text = ({ children }) => <p className="align-center">{children}</p>;

const options = {
  renderMark: {
    [MARKS.BOLD]: (text) => <Bold>{text}</Bold>,
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
  },
  renderText: (text) => text.replace('!', '?'),
};

documentToReactComponents(document, options);
// -> <p class="align-center"><p class="bold">Hello</p><u> world?</u></p>
```

最后,但并非最不重要的是,您可以通过嵌入式条目的自定义渲染组件:

```javascript
import { BLOCKS } from '@contentful/rich-text-types';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'embedded-entry-block',
      data: {
        target: (...)Link<'Entry'>(...);
      },
    },
  ]
};

const CustomComponent = ({ title, description }) => (
  <div>
    <h2>{title}</h2>
    <p>{description}</p>
  </div>
);

const options = {
  renderNode: {
    [BLOCKS.EMBEDDED_ENTRY]: (node) => {
      const { title, description } = node.data.target.fields;
      return <CustomComponent title={title} description={description} />
    }
  }
};

documentToReactComponents(document, options);
// -> <div><h2>[title]</h2><p>[description]</p></div>
```

这个 `renderNode` 键应为以下之一 `BLOCKS` 财务报告和审定财务报表 `INLINES` 定义属性 [`@contentful/rich-text-types`](https://www.npmjs.com/package/@contentful/rich-text-types)数字 :

-   `BLOCKS`
    
    -   `DOCUMENT`
    -   `PARAGRAPH`
    -   `HEADING_1`
    -   `HEADING_2`
    -   `HEADING_3`
    -   `HEADING_4`
    -   `HEADING_5`
    -   `HEADING_6`
    -   `UL_LIST`
    -   `OL_LIST`
    -   `LIST_ITEM`
    -   `QUOTE`
    -   `HR`
    -   `EMBEDDED_ENTRY`
    -   `EMBEDDED_ASSET`
    -   `EMBEDDED_RESOURCE`
-   `INLINES`
    
    -   `EMBEDDED_ENTRY` (这与 `BLOCKS.EMBEDDED_ENTRY`(中文(简体) )
    -   `EMBEDDED_RESOURCE`
    -   `HYPERLINK`
    -   `ENTRY_HYPERLINK`
    -   `ASSET_HYPERLINK`
    -   `RESOURCE_HYPERLINK`

这个 `renderMark` 键应为以下之一 `MARKS` 定义属性 [`@contentful/rich-text-types`](https://www.npmjs.com/package/@contentful/rich-text-types)数字 :

-   `BOLD`
-   `ITALIC`
-   `UNDERLINE`
-   `CODE`

这个 `renderText` callback是一个具有单一字符串参数并返回反应节点的函数。 每个文本节点由这个回调单独评估. 一种可能的用例是取代 `\n` 生产 `Shift + Enter` 与 `<br/>` 反应元素. 可以通过下列方式做到这一点:

```javascript
const options = {
  renderText: (text) => {
    return text.split('\n').reduce((children, textSegment, index) => {
      return [...children, index > 0 && <br key={index} />, textSegment];
    }, []);
  },
};
```

#### 关于添加a的说明 `key` 自定义渲染器中的道具 :

有可能通过 `key` 由自定义渲染器返回的组件中的道具。 使用节点嵌入的条目中有一个很好的用途 `target.sys.id`。重要的是不要通过任何类似索引(例如1或1)的东西,因为它可能与自动注入一个索引的默认渲染器相冲突 `key` prop在内容丰富的文本 AST 中使用它们的索引.

要围绕这个限制工作, 请在您的自定义密钥中附加任何非数字字符 .

```javascript
const options = {
  renderMark: {
    [MARKS.BOLD]: (text) => {
      return <b key={`${text}-key`}>{text}</b>;
    },
  },
};
```

#### 保留空白

这个 `options` 对象可以包含一个 `preserveWhitespace` 布尔旗。 设定为 `true`,此旗帜通过替换内容,确保丰富文本内容中的多个空格得到保存 `&nbsp;`换行符 `<br />` 标签。 这对依赖于使用空格和换行符进行特定格式化的内容有用.

请注意: `preserveWhitespace` 与 `renderText` 选项。 当功能 `preserveWhitespace` 与习惯一起需要 `renderText` 复召,应在复召范围内执行.

```javascript
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello     world!',
          marks: [],
        },
      ],
    },
  ],
};

const options = {
  preserveWhitespace: true,
};

documentToReactComponents(document, options);
// -> <p>Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world!</p>
```

在这个例子中,"Hello"和"world!"之间的多处空格被保存在已渲染的输出中.

## 常见问题

### @contentful/rich-text-react-renderer 是什么？

内容丰富的文本字段类型的反应渲染器\.

### 如何安装 @contentful/rich-text-react-renderer？

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

### @contentful/rich-text-react-renderer 支持 TypeScript 吗？

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

### @contentful/rich-text-react-renderer 支持 ESM 还是 CommonJS？

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

### @contentful/rich-text-react-renderer 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @contentful/rich-text-react-renderer 可以商用吗？

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

### @contentful/rich-text-react-renderer 的下载量有多少？

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

### @contentful/rich-text-react-renderer 还在维护吗？

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