在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>'
    }
};