React-HTML-Parser

引入方法

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

render()中使用

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

设置options：

const options = {
 decodeEntities: true,
 transform
};

function transform(node, index) {

 // return null to block certain elements
 // don't allow <span> elements
 if (node.type === 'tag' && node.name === 'span') {
     return null;
 }

 // Transform <ul> into <ol>
 // A node can be modified and passed to the convertNodeToElement function which will continue to render it and it's children
 if (node.type === 'tag' && node.name === 'ul') {
     node.name = 'ol';
     return convertNodeToElement(node, index, transform);
 }

 // return an <i> element for every <b>
 // a key must be included for all elements
 if (node.type === 'tag' && node.name === 'b') {
     return <i key={index}>I am now in italics, not bold</i>;
 }

 // all links must open in a new window
 if (node.type === 'tag' && node.name === 'a') {
     node.attribs.target = '_blank';
     return convertNodeToElement(node, index, transform);
 }

}