在React组件中将HTML字符串呈现为真正的HTML
在React组件中将HTML字符串呈现为真正的HTML
提问于 2016-09-29 05:42:04
这是我尝试过的，以及它是如何出错的。
这是可行的：
<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />这不是：
<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />description属性只是HTML内容的普通字符串。但是，由于某些原因，它被呈现为字符串，而不是HTML。
有什么建议吗？
回答 9
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用户
发布于 2018-04-11 22:19:42
如果您可以控制包含html的字符串的来源(即，在您的应用程序中的某个位置)，您可以从新的<Fragment>应用程序接口中获益，如下所示：
import React, {Fragment} from 'react'
const stringsSomeWithHtml = {
testOne: (
<Fragment>
Some text <strong>wrapped with strong</strong>
</Fragment>
),
testTwo: `This is just a plain string, but it'll print fine too`,
}
...
render() {
return <div>{stringsSomeWithHtml[prop.key]}</div>
}Stack Overflow用户
发布于 2020-10-04 05:20:40
如果字符串中有超文本标记语言，我建议使用一个名为html-react-parser的包。
安装它：npm install html-react-parser，或者如果你使用yarn，安装yarn add html-react-parser
像这样使用它
import parse from 'html-react-parser'
const yourHtmlString = '<h1>Hello</h1>'<div>
{parse(yourHtmlString)}
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39758136
复制相关文章
相似问题