Html ReactJS-如何在Ajax调用中返回时正确呈现回车_Html_Ajax_Reactjs

Html ReactJS-如何在Ajax调用中返回时正确呈现回车

html ajax reactjs

Html ReactJS-如何在Ajax调用中返回时正确呈现回车,html,ajax,reactjs,Html,Ajax,Reactjs,在ReactJS中，如何能够呈现用户在textarea控件中提交的回车。包含回车的内容由Ajax调用检索，该调用调用需要将\r\n字符转换为或其他内容的API。然后，我有一个div元素，应该在其中呈现内容。我尝试了以下Ajax响应： { "Comment" : "Some stuff followed by line breaks<br/><br/><br/><br/>And more stuff.", } 但它不是在浏览器中呈现回车，而

在ReactJS中，如何能够呈现用户在

textarea控件中提交的回车。包含回车的内容由Ajax调用检索，该调用调用需要将\r\n
字符转换为
或其他内容的API。然后，我有一个div
元素，应该在其中呈现内容。我尝试了以下Ajax响应：
{
    "Comment" : "Some stuff followed by line breaks<br/><br/><br/><br/>And more stuff.",
}

但它不是在浏览器中呈现回车，而是在第一种情况下将br标记呈现为纯文本，在第二种情况下将\n字符呈现为空格
这里推荐的方法是什么？我想我应该避开可怕的危险的LysetinerHTML
属性？例如，以下各项实际可行，但必须有一种更安全的方式来处理运费返还：
<div className="comment-text" dangerouslySetInnerHTML={{__html: comment.Comment}}></div>

如果使用DOM，请确保使用innerHTML添加文本。然而，在世界上，更有利的是使用
此外，浏览器仅理解HTML，不会将\n解释为换行符。在渲染之前，应将其替换为
。
危险的是，HTML
是您想要的。这个名字是为了吓人，因为使用它会带来XSS攻击的风险，但本质上它只是提醒你需要清理用户输入（无论如何你都应该这么做！）
若要在使用危险的SytenerySetinerHTML
时查看XSS攻击，请尝试让用户保存一条注释，其文本为：
只是一个无辜的评论。。。。警报（“XSS！！！”

您可能会惊讶地发现，此注释实际上会创建警报弹出窗口。当任何人查看他们的评论时，更恶意的用户可能会插入JS以下载病毒。我们显然不能允许这样
但是防范XSS非常简单。清理需要在服务器端完成，但是有很多包可以为任何可能的服务器端设置完成这项任务
下面是一个很好的Rails包示例，例如：
只要确保您选择的任何一种消毒液都使用“白名单”消毒方法，而不是“黑名单”消毒方法。
.replace（//g，“\n”）@您已经尝试过了\n似乎被渲染为空格。然后你需要单词间距：在csshtml中pre或pre-wrap进行反应是非常高级的，但我可以看到它如何帮助我。但肯定不会比使用危险的LysetinerHTML更“安全”吗？接受这个答案，因为它是框架的标准部分，我最终还是使用了它。我会非常注意卫生处理。
<div className="comment-text" dangerouslySetInnerHTML={{__html: comment.Comment}}></div>