關於 React 小書：dangerouslySetInnerHTML & style

React 自動轉譯

考慮到資安怕被 XSS 攻擊，在 React.js 中所有表達式插入的內容都會被自動轉譯。

class Editor extends Component {
  constructor() {
    super()
    this.state = {
      content: '<h1>React.js 小书</h1>'
    }
  }

  render () {
    return (
      <div className='editor-wrapper'>
        {this.state.content}
      </div>
    )
  }
}

dangerouslySetHTML

設置 innerHTML 容易被 XSS 攻擊，React.js 團隊故意搞複雜為了防止大家濫用這個屬性

...
  render () {
    return (
      <div
        className='editor-wrapper'
        dangerouslySetInnerHTML={{__html: this.state.content}} />
    )
  }
...

style

要駝峰式命名

<h1 style={{fontSize: '12px', color: this.state.color}}>React.js 小书</h1>

可用 setState 調整 css

setState({color: 'blue'})

參考資源

• dangerouslySetHTML 和 style 属性