在React组件中将HTML字符串呈现为真正的HTML
这是我尝试过的，以及它是如何出错的。
这是可行的：
<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />这不是：
<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />description属性只是HTML内容的普通字符串。但是，由于某些原因，它被呈现为字符串，而不是HTML。
有什么建议吗？
回答 13
Stack Overflow用户
发布于 2016-09-29 07:00:36
检查您尝试附加到节点的文本是否没有像这样转义：
var prop = {
match: {
description: '<h1>Hi there!</h1>'
}
};而不是这样：
var prop = {
match: {
description: '<h1>Hi there!</h1>'
}
};如果是转义的，你应该从你的服务器端转换它。
该节点是文本，因为是转义的
该节点是dom节点，因为没有进行转义。
Stack Overflow用户
发布于 2016-09-29 06:28:18
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标记，那么我看到的唯一问题就是错误的标记。
更新
如果你正在处理超文本标记语言实体，你需要在将它们发送到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'));Stack Overflow用户
发布于 2019-04-28 03:54:30
我使用'react-html-parser‘
yarn add react-html-parserimport ReactHtmlParser from 'react-html-parser';
<div> { ReactHtmlParser (html_string) } </div>提升@okram的评论以获得更多的可见度：
将
字符串直接转换为React组件，而无需使用npmjs.com中的dangerouslySetInnerHTML将HTML字符串转换为React组件。避免使用dangerouslySetInnerHTML，并将标准的HTML元素、属性和内联样式转换为React等效项。
https://stackoverflow.com/questions/39758136
复制相似问题