最近前端使用的技术栈是react，在显示内容的时候发现数据库中的内容存的是包含HTML标签的一段文本，那么在前端显示的时候需要把这些文本的样式也显示出来，这就意味着我们需要在react中嵌入DOM而不是普通的文字内容。
使用dangerouslySetInnerHTML
在react中有一种自带的方式叫dangerouslySetInnerHTML
const description = (<div dangerouslySetInnerHTML={{__html: cleanHTML(book.description)}}></div>)
....
<div className="description">{description}</div>
使用这种方式可能会遭受 cross-site scripting (XSS) 攻击
使用包react-render-html
react-render-html使用方式如下：
import renderHTML from "react-render-html";
...
<div className="description">{renderHTML(book.description)}</div>
缺点：
- 使用了 parse5 parse HTML所以会导致很大的bundle size。
- render速度慢，花费很长的时间去parse。
并且看这个包的源码，发现同样使用了dangerouslySetInnerHTML的参数。
网友评论