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 和容器類組件