React.js 小書 Lesson23 - dangerouslySetHTML 和 style 屬性
轉載請注明出處，保留原文鏈接以及作者信息
在線閱讀：http://huziketang.com/books/react
{% raw %}
這一節我們來補充兩個之前沒有提到的屬性，但是在 React.js 組件開發中也非常常用，但是它們也很簡單。
dangerouslySetHTML
出于安全考慮的原因（XSS 攻擊），在 React.js 當中所有的表達式插入的內容都會被自動轉義，就相當于 jQuery 里面的 text(…) 函數一樣，任何的 HTML 格式都會被轉義掉：
class Editor extends Component {
constructor() {
super()
this.state = {
content: '<h1>React.js 小書</h1>'
}
}
render () {
return (
<div className='editor-wrapper'>
{this.state.content}
</div>
)
}
}
假設上面是一個富文本編輯器組件，富文本編輯器的內容是動態的 HTML 內容，用 this.state.content 來保存。我希望在編輯器內部顯示這個動態 HTML 結構，但是因為 React.js 的轉義特性，頁面上會顯示：
[圖片上傳失敗...(image-300cb3-1510226959693)]
表達式插入并不會把一個 <h1> 渲染到頁面，而是把它的文本形式渲染了。那要怎么才能做到設置動態 HTML 結構的效果呢？React.js 提供了一個屬性 dangerouslySetInnerHTML，可以讓我們設置動態設置元素的 innerHTML：
...
render () {
return (
<div
className='editor-wrapper'
dangerouslySetInnerHTML={{__html: this.state.content}} />
)
}
...
需要給 dangerouslySetInnerHTML 傳入一個對象，這個對象的 __html 屬性值就相當于元素的 innerHTML，這樣我們就可以動態渲染元素的 innerHTML 結構了。
有寫朋友會覺得很奇怪，為什么要把一件這么簡單的事情搞得這么復雜，名字又長，還要傳入一個奇怪的對象。那是因為設置 innerHTML 可能會導致跨站腳本攻擊（XSS），所以 React.js 團隊認為把事情搞復雜可以防止（警示）大家濫用這個屬性。這個屬性不必要的情況就不要使用。
style
React.js 中的元素的 style 屬性的用法和 DOM 里面的 style 不大一樣，普通的 HTML 中的：
<h1 style='font-size: 12px; color: red;'>React.js 小書</h1>
在 React.js 中你需要把 CSS 屬性變成一個對象再傳給元素：
<h1 style={{fontSize: '12px', color: 'red'}}>React.js 小書</h1>
style 接受一個對象，這個對象里面是這個元素的 CSS 屬性鍵值對，原來 CSS 屬性中帶 - 的元素都必須要去掉 - 換成駝峰命名，如 font-size 換成 fontSize，text-align 換成 textAlign。
用對象作為 style 方便我們動態設置元素的樣式。我們可以用 props 或者 state 中的數據生成樣式對象再傳給元素，然后用 setState 就可以修改樣式，非常靈活：
<h1 style={{fontSize: '12px', color: this.state.color}}>React.js 小書</h1>
只要簡單地 setState({color: 'blue'}) 就可以修改元素的顏色成藍色。
{% endraw %}
