React.js 小書 Lesson23 - dangerouslySetHTML 和 style 屬性

• 做者：鬍子大哈
• 原文連接： http://huziketang.com/books/react/lesson23
• 轉載請註明出處，保留原文連接和做者信息。

這一節咱們來補充兩個以前沒有提到的屬性，可是在 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 的轉義特性，頁面上會顯示：

表達式插入並不會把一個 <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'}) 就能夠修改元素的顏色成藍色。

課後練習

*覆蓋默認樣式

---

由於第三方評論工具備問題，對本章節有任何疑問的朋友能夠移步到 React.js 小書的論壇 發帖，我會回答你們的疑問。