替代dangerouslySetInnerHTML

Question

我使用React来构建一个存储文档的web应用程序。这些都是用HTML创建的，然后存储在数据库中。为了在应用程序中显示它们，我使用div来加载dangerouslySetInnerHTML中的HTML。

<div dangerouslySetInnerHTML={{__html: this.props.page.content}} />

即使通过这个方法可以很好地工作，dangerouslySetInnerHTML建议更多地关注这种情况，但是我想知道如何保持足够的灵活性来加载HTML并使其出现在web应用程序中。我相信“危险”这个词解决了跨站点脚本编写的危险，这意味着脚本可以被注入，执行有害的代码。

作为一种对策，我考虑在将HTML代码解析到div之前清除它。解决这个问题的一个库是DOMPurify。另一种方法是使用html-react解析器将数据库中的HTML代码直接转换为React元素。

这是正确的做法吗？还是有替代dangerouslySetInnerHTML的方法？

Answer 1

也许这些解析器可以满足您的需要。

html反应

html-react解析器