我们有一个包含HTML代码的数据库，我们使用React在网页上显示它，但它需要被解析。
我最初使用的是html-react-parser，但经过代码审查后，我被要求使用dangerlysetinnerhtml，因为它没有任何依赖项。
除了不使用危险的setinnerhtml之外，我不能清楚地说出使用html-react-parser的任何优点，但是这是一个优点吗?如果是，为什么?它是以某种方式避免了危险，还是只是隐藏了危险?
许多谢谢,
凯蒂
我最近一直在为我正在从事的一个Headless CMS项目研究这个问题。据我所知:
dangerouslySetInnerHtml在ReactDOM.Render()方法之外创建DOM元素，因此它不是由React库动态维护的。这基本上违背了使用React的初衷(显示和维护虚拟DOM)。
更令人担忧的是，它很容易受到跨站点脚本(XSS)攻击，这就是它的名字的由来。这是一种非常常见的网络攻击形式。你可以在这里阅读:https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
如果你想让应用程序不那么容易受到攻击，你必须使用像DOMPurify这样的消毒库来处理dangerouslySetInnerHtml，所以你很可能有另一个依赖关系。一旦你将应用程序编译为产品(npm build)，最小化过程使代码库非常紧凑，并且你可以事先使用代码分割等技术进行一些优化，这使得页面的每个部分仅在请求时加载，而不是一次加载:https://reactjs.org/docs/code-splitting.html
我个人不会太担心一些依赖，它们是现代网络生活的一个事实。我一直倾向于使用html-react-parser，但我警告说，我没有调查它是否减少了XSS漏洞。然而，即使两者都容易受到XSS攻击，至少html-react-parser通过ReactDOM.render()引入了这些元素，这样它们就不会让DOM变得一无是处——这听起来像是一种灾难的配方。