如何将 HTML 字符串呈现为真正的 HTML？

Question

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

这有效：

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

这不会：

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

---

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

有什么建议么？

原文由 Sergio Tapia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

而不是这个：

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

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

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

该节点是 dom 节点，因为没有转义

原文由 Sergio Flores 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

this.props.match.description 是字符串还是对象？如果它是一个字符串，它应该被转换成 HTML 就好了。例子：

 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

但是，如果描述是 <h1 style="color:red;">something</h1> 没有引号 '' ，你将得到：

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

如果它是一个字符串并且你没有看到任何 HTML 标记，我看到的唯一问题是错误的标记..

更新

如果你正在处理 HTML 实体，你需要在将它们发送到 dangerouslySetInnerHTML 之前对其进行解码—这就是它被称为“危险”的原因:)

工作示例：

 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'));

原文由 Ilanus 发布，翻译遵循 CC BY-SA 4.0 许可协议