關於 React 小書:dangerouslySetInnerHTML & style


Posted by YongChenSu on 2020-12-09

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'})


參考資源


#程式導師實驗計畫第四期 #前端 #React #react 小書 #dangerouslySetInnerHTML







Related Posts

ASP.NET Core Web API 入門教學 - 使用 cookie 驗證但不使用 ASP.NET Core Identity

ASP.NET Core Web API 入門教學 - 使用 cookie 驗證但不使用 ASP.NET Core Identity

資料格式的選擇:XML & JSON

資料格式的選擇:XML & JSON

Math.(floor/ceil/round) in JavaScript

Math.(floor/ceil/round) in JavaScript


Comments