反应 HTML 解析器

注:此Artsy分叉将 htmlparser2 依赖性替换为 DOMParser 由现代浏览器提供的API. 因此, 用于操作的节点的API略有不同.

将 HTML 字符串转换为工具 反应 组件。 避免使用危险的Set InnerHTML,将标准的HTML元素,属性和内置样式转换为它们的回放等效.

试试现场演示

安装

npm install @artsy/react-html-parser
# or
yarn add @artsy/react-html-parser

使用量

import React from 'react';
import ReactHtmlParser, {
  processNodes,
  convertNodeToElement
} from 'react-html-parser';

class HtmlComponent extends React.Component {
  render() {
    const html = '<div>Example HTML string</div>';
    return <div>{ReactHtmlParser(html)}</div>;
  }
}

API 密码

function ReactHtmlParser(html, [options])

使用 HTML 字符串并返回等同的反应元素

使用量

import ReactHtmlParser from 'react-html-parser';

参数

• html: 要解析的 HTML 字符串
• options选项对象
  • 转换 (职务): 应用到每个节点的变形函数
  • 预处理节点 (职务): 预处理由 DOMParser

变形函数

变换功能将被调用到每个由库解析的节点.

function transform(node, index)

参数

• node:正在解析的节点. 这是平地 节点 编号 : 元素 以其他方式由浏览器生成.

返回类型

return null 返回无效会阻止节点 和它的所有的孩子.

function transform(node) {
  // do not render any <span> tags
  if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'SPAN') {
    return null;
  }
}

return undefined 如果函数不返回任何东西,或者返回未定义,那么默认行为将发生,解析器会继续是常见的.

return React element 反应元素可以直接返回

import React from 'react';
function transform(node) {
  if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'B') {
    return <div>This was a bold tag</div>;
  }
}

预处理节点函数

允许通过 html 预处理生成的节点 DOMParser 在传递到库后转换为React元素.

function preprocessNodes(nodes)

参数

• nodes: 整个节点树由 DOMParser。 。 。 .

返回类型

这个 preprocessNodes 函数应返回一个有效的 DOMParser 节点树.

function convertNodeToElement(node, index, transform)

处理一个节点并返回要渲染的 React 元素。 此函数可以结合前述 transform 函数可以在修改后继续处理节点.

使用量

import { convertNodeToElement } from 'react-html-parser';

参数

• node: 要处理的节点
• index (数字): 与它为主的节点索引
• transform:上述转变功能

import { convertNodeToElement } from 'react-html-parser';
function transform(node, index) {
  // convert <ul> to <ol>
  if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'UL') {
    node.name = 'ol';
    return convertNodeToElement(node, index, transform);
  }
}