JSX 表达式中显示 HTML 实体
- JSX是HTML和JS混合写的语法
- 遇到<，就当html解析
- 遇到{就当JS解析
- 在JSX中可以通过用大括号{}来加入JavaScript表达式
问题
- 当在JS表达式中显示HTML实体的时候，可能会遇到二次转译的问题
- 业务场景
- 新闻业务，内容为网络上抓的各种文章，是HTML实体
- 代码例子
render () {
const newContent = '<div>我是新闻内容</div>';
return (
<div>
{ newContent }
</div>
)
}
- 显示结果
image.png
原因
- 因为react会默认转译所有字符串，防止XSS攻击。
解决方式
- 使用dangerouslySetInnerHTML
render () {
const newContent = '<div>我是新闻内容</div>';
return (
<div>
<div dangerouslySetInnerHTML={{__html: newContent}}></div>
</div>
)
}
-
显示结果
image.png
