# @artsy/react-html-parser 中文文档 规范地址：https://npmcn.com/package/%40artsy/react-html-parser/ 版本：3\.0\.2 npm 元数据更新时间：2025-11-18T23:31:45.054Z 中文译文更新时间：2026-11-06T21:22:12.533Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40artsy/react-html-parser 原文对照：https://npmcn.com/package/%40artsy/react-html-parser/?lang=original 源码仓库：https://github.com/wrakky/react-html-parser ## 关键信息（来自 npm 元数据） - 包体积（解压后）：357 kB，98 个文件 - 模块格式：CommonJS - TypeScript 类型：未声明 - 运行依赖：0 个 - peer 依赖：react ^0\.14\.0 \|\| ^15\.0\.0 \|\| ^16\.0\.0-0 - 首次发布：2019-10-11T18:42:07.744Z - 最新版本发布：2019-10-14T16:24:21.904Z - 近 30 天下载量：20647（2026-10-07 至 2026-11-05，npm 官方下载统计） - 已发布版本数：3（近 12 个月 0 个） ## 中文简介 将 HTML 分析为 React 组件 ## 安装 ```sh npm install @artsy/react-html-parser ``` 也可以使用：`pnpm add @artsy/react-html-parser`、`yarn add @artsy/react-html-parser`、`bun add @artsy/react-html-parser` ## README # 反应 HTML 解析器 _注:此Artsy分叉将 htmlparser2 依赖性替换为 `DOMParser` 由现代浏览器提供的API. 因此, 用于操作的节点的API略有不同._ 将 HTML 字符串转换为工具 [反应](https://facebook.github.io/react/) 组件。 避免使用危险的Set InnerHTML,将标准的HTML元素,属性和内置样式转换为它们的回放等效. [试试现场演示](https://wrakky.github.io/react-html-parser) [![Travis branch](https://img.shields.io/travis/wrakky/react-html-parser/master.svg)](https://travis-ci.org/wrakky/react-html-parser) [![Coveralls](https://img.shields.io/coveralls/wrakky/react-html-parser.svg)](https://coveralls.io/github/wrakky/react-html-parser) [![npm](https://img.shields.io/npm/v/react-html-parser.svg)](https://www.npmjs.com/package/react-html-parser) [![Downloads](https://img.shields.io/npm/dw/react-html-parser.svg)](https://www.npmjs.com/package/react-html-parser) [![David](https://img.shields.io/david/wrakky/react-html-parser.svg)](https://david-dm.org/wrakky/react-html-parser) ## 安装 ```bash npm install @artsy/react-html-parser # or yarn add @artsy/react-html-parser ``` ## 使用量 ```javascript import React from 'react'; import ReactHtmlParser, { processNodes, convertNodeToElement } from 'react-html-parser'; class HtmlComponent extends React.Component { render() { const html = '
Example HTML string
'; return
{ReactHtmlParser(html)}
; } } ``` ## API 密码 ### `function ReactHtmlParser(html, [options])` 使用 HTML 字符串并返回等同的反应元素 #### 使用量 ```js import ReactHtmlParser from 'react-html-parser'; ``` #### 参数 - `html`: 要解析的 HTML 字符串 - `options`选项对象 - 转换 _(职务)_: 应用到每个节点的变形函数 - 预处理节点 _(职务)_: 预处理由 `DOMParser` #### 变形函数 变换功能将被调用到每个由库解析的节点. `function transform(node, index)` ##### 参数 - `node`:正在解析的节点. 这是平地 [节点](https://developer.mozilla.org/en-US/docs/Web/API/Node) 编号 : [元素](https://developer.mozilla.org/en-US/docs/Web/API/Element) 以其他方式由浏览器生成. #### 返回类型 `return null` 返回无效会阻止节点 和它的所有的孩子. ```js function transform(node) { // do not render any tags if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'SPAN') { return null; } } ``` `return undefined` 如果函数不返回任何东西,或者返回未定义,那么默认行为将发生,解析器会继续是常见的. `return React element` 反应元素可以直接返回 ```js import React from 'react'; function transform(node) { if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'B') { return
This was a bold tag
; } } ``` #### 预处理节点函数 允许通过 html 预处理生成的节点 `DOMParser` 在传递到库后转换为React元素. `function preprocessNodes(nodes)` ##### 参数 - `nodes`: 整个节点树由 `DOMParser`。 。 。 . ##### 返回类型 这个 `preprocessNodes` 函数应返回一个有效的 `DOMParser` 节点树. ### `function convertNodeToElement(node, index, transform)` 处理一个节点并返回要渲染的 React 元素。 此函数可以结合前述 `transform` 函数可以在修改后继续处理节点. #### 使用量 ```js import { convertNodeToElement } from 'react-html-parser'; ``` #### 参数 - `node`: 要处理的节点 - `index` (数字): 与它为主的节点索引 - `transform`:上述转变功能 ```js import { convertNodeToElement } from 'react-html-parser'; function transform(node, index) { // convert