返回博客

React 渲染 HTML 字符串

React 组件输出 HTML 字符串,如何直接渲染而不是显示为字符串?使用 dangerouslySetInnerHTML 方法解决,但需注意其安全性。

Mt.r
|

问题

组件输出的是 html 字符串,期望能直接渲染出来而不是用字符串形式显示

let a = "<br>123<br>456"
<div>{a}</div>

解决方法

使用 dangerouslySetInnerHTML 方法,见官方文档: dangerouslySetInnerHTML

let a = "<br>123<br>456"
<div dangerouslySetInnerHTML={{__html: a}} />

后记

翻译一下方法名:危险的设置 InnerHTML,要注意一下