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調用中返回正確返回回車

回答

相關問題