Question

在ReactJS中，如何呈现可由用户在textarea control中提交的回车。包含回车符的内容由Ajax调用检索，该调用调用需要将\r\n字符转换为<br>或其他内容的API。然后，我有一个div元素，其中应该呈现内容。我尝试了以下Ajax响应：

{
    "Comment" : "Some stuff followed by line breaks<br/><br/><br/><br/>And more stuff.",
}

和

{
    "Comment" : "Some stuff followed by line breaks\n\n\nAnd more stuff.",
}

但是，不是在浏览器中渲染回车，而是在第一种情况下将br标记呈现为纯文本，在第二种情况下将\ n字符呈现为空格。

这里推荐的方法是什么？我猜我应该避开可怕的dangerouslySetInnerHTML财产？例如，以下实际上会有效，但必须有一种更安全的方式来处理回车：

<div className="comment-text" dangerouslySetInnerHTML={{__html: comment.Comment}}></div>

Answer 1

dangerouslySetInnerHTML就是你想要的。名称意味着是可怕的，因为使用它会带来XSS攻击的风险，但实质上它只是提醒您需要清理用户输入（无论如何你应该做！）

要在使用dangerouslySetInnerHTML时查看正在进行的XSS攻击，请尝试让用户保存其文字为的注释：

Just an innocent comment.... <script>alert("XSS!!!")</script>

您可能会惊讶地发现此评论实际上会创建警报弹出窗口。当有人查看他们的评论时，更恶意的用户可能会插入JS来下载病毒。我们显然不能允许这样做。

但是防范XSS非常简单。需要在服务器端完成清理，但是有很多可用的软件包可以为任何可想到的服务器端设置完成这项任务。

以下是Rails良好包的示例，例如：https://github.com/rgrove/sanitize

请确保您选择的清洁剂使用＆＃34;白名单＆＃34;消毒方法，而不是＆＃34;黑名单＆＃34;之一。

Answer 2

如果您正在使用DOM，请确保使用innerHTML添加文本。但是，在反应世界中，更有利的是使用https://www.npmjs.com/package/html-to-react

此外，浏览器只能理解HTML，不会将\ n解释为换行符。在渲染之前，您应该将其替换为<br/>。