在React组件中将HTML字符串呈现为真实HTML

Question

以下是我尝试过的，以及它是如何出错的。

这个作品：

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />

这没有：

<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />

description属性只是HTML内容的普通字符串。但是，由于某些原因，它被呈现为字符串，而不是HTML。

有什么建议吗？

Answer 1

检查您试图附加到节点的文本是否没有像这样转义：

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

而不是这样：

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

如果是转义，你应该从你的服务器端转换它。

该节点是文本的，因为是转义的

该节点是dom节点，因为未转义

Answer 2

我使用“react html解析器”

yarn add react-html-parser

import ReactHtmlParser from 'react-html-parser'; 

<div> { ReactHtmlParser (html_string) } </div>

npmjs.com来源

提升@okram的评论以获得更多关注：

从它的github描述：将HTML字符串直接转换为React组件，避免使用NPMJ的危险的HTML。com是将HTML字符串转换为React组件的实用程序。避免使用危险的HTML，并将标准HTML元素、属性和内联样式转换为它们的等价物。

Answer 3

this.props.match.description是字符串还是对象？如果它是一个字符串，它应该被转换为超文本标记语言。示例：

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: '<h1 style="color:red;">something</h1>'
    }
  }
  
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.description }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

结果：http://codepen.io/ilanus/pen/QKgoLA?editors=1011

但是，如果描述为

​Object {
$$typeof: [object Symbol] {},
  _owner: null,
  key: null,
  props: Object {
    children: "something",
    style: "color:red;"
  },
  ref: null,
  type: "h1"
}

如果它是一个字符串，而您没有看到任何HTML标记，那么我看到的唯一问题就是错误的标记。。

使现代化

如果您正在处理超文本标记语言实体，您需要在将它们发送到危险的SetInnerHTML之前对它们进行解码，这就是为什么它被称为危险的：）

工作示例：

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '<p><strong>Our Opportunity:</strong></p>'
    }
  }

   htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));