dangerouslySetHTML 和 style 屬性

這一節我們來補充兩個之前沒有提到的屬性，但是在 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'}) 就可以修改元素的顏色成藍色。

下一節：PropTypes 和組件參數驗證

上一節：props.children 和容器類組件