ReactJS - 如何在Ajax调用中返回正确返回回车

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

来源

2016-09-19 ianbeks

'.replace（/
/g，'\ n'）' – YOU

@YOU已经试过这个。 \ n似乎被渲染为空间。 – ianbeks

然后你需要word-spacing：pre或pre-wrap在css中 – YOU

dangerouslySetInnerHTML是你想要的。这个名字是意味着是可怕的，因为使用它为XSS攻击的危险，但实际上它只是你需要过滤用户输入的提醒（你无论如何都应该做的！）

要查看XSS攻击在同时使用dangerouslySetInnerHTML行动，尝试有用户保存评论其文本是：

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

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

但是防止XSS是非常简单的。消毒需要在服务器端完成，但有大量的软件包可以完成任何可能的服务器端设置的确切任务。

这里有一个很好的封装为Rails的例子，例如：https://github.com/rgrove/sanitize

只要确保无论消毒剂你选择使用“白名单”的消毒方法，而不是一个“黑名单”之一。

来源

2016-09-19 17:21:46 gravityplanx

接受这个答案，因为它是框架的一个标准部分，我最终使用它。我会非常小心地注意卫生。 – ianbeks

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

而且，浏览器只理解HTML并且不会将\ n解释为换行符。在渲染之前，您应该用<br/>替换它。

来源

2016-09-19 10:00:09 helloworld

html-to-react是相当先进的，但我可以看到它可以如何帮助我。但肯定它不会比使用危险的SetInnerHTML更“安全”？ – ianbeks

ReactJS - 如何在Ajax调用中返回正确返回回车

回答

相关问题