使用ReactJS渲染格式化文本

Question

很抱歉，如果您发现此问题愚蠢或偏离主题，但我有以下问题。我正在尝试使用ReactJS并尝试编写类似于博客的单页应用程序。

我希望用户在我的博客上撰写文章，其中包含丰富的文字修饰功能。所以我将允许他们使用一些html标签。问题是：呈现用户输入数据的最佳方式是什么？

我只是可以获取他们的html输入，逃避危险的html标签（如脚本等），然后只使用dangerouslySetInnerHTML来渲染原始html。这是一个好方法吗？是否有一些ReactJS特定功能可以解决我的问题？

谢谢！

Answer 1

不，如果可以，请避免dangerouslySetInnerHtml。官方react documents：

中也说明了这一点

  

通常，从代码设置HTML是有风险的，因为很容易无意中将您的用户暴露给跨站点脚本（XSS）攻击。

一种可能的方法是定义一个特定的输入格式，如@canaan seaton所述。 我的想法是使用像draftjs这样的组件来呈现富文本内容，并让编辑能够看到他们得到的内容（wysiwyg）。 Draftjs非常容易理解，有很多资源和额外的包（比如语法高亮，......）。

当然，您也可以使用任何其他富文本编辑组件。