react中嵌入DOM

最近前端使用的技术栈是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的参数。