这是我尝试过的,以及它是如何出错的。
这是可行的:
<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />
这不是:
<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />
description属性只是HTML内容的普通字符串。但是,由于某些原因,它被呈现为字符串,而不是HTML。
有什么建议吗?
发布于 2016-09-29 07:00:36
检查您尝试附加到节点的文本是否没有像这样转义:
var prop = {
match: {
description: '<h1>Hi there!</h1>'
}
};
而不是这样:
var prop = {
match: {
description: '<h1>Hi there!</h1>'
}
};
如果是转义的,你应该从你的服务器端转换它。
该节点是文本,因为是转义的
该节点是dom节点,因为没有进行转义。
发布于 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>
}
发布于 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>
https://stackoverflow.com/questions/39758136
复制相似问题