React.js 小書 Lesson23 - dangerouslySetHTML 和 style

curried 發布于2019-08-21 17:34 / 3440人閱讀

摘要：那是因為設置可能會導致跨站腳本攻擊，所以團隊認為把事情搞復雜可以防止警示大家濫用這個屬性。下一節中我們將介紹小書和組件參數驗證。

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

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson23

轉載請注明出處，保留原文鏈接以及作者信息

在線閱讀：http://huziketang.com/books/react

{% raw %}
這一節我們來補充兩個之前沒有提到的屬性，但是在 React.js 組件開發中也非常常用，但是它們也很簡單。

dangerouslySetHTML

出于安全考慮的原因（XSS 攻擊），在 React.js 當中所有的表達式插入的內容都會被自動轉義，就相當于 jQuery 里面的 text(…) 函數一樣，任何的 HTML 格式都會被轉義掉：

class Editor extends Component {
  constructor() {
    super()
    this.state = {
      content: "React.js 小書"
    }
  }

  render () {
    return (
      
        {this.state.content}
      
    )
  }
}

假設上面是一個富文本編輯器組件，富文本編輯器的內容是動態的 HTML 內容，用 this.state.content 來保存。我希望在編輯器內部顯示這個動態 HTML 結構，但是因為 React.js 的轉義特性，頁面上會顯示：

表達式插入并不會把一個

渲染到頁面，而是把它的文本形式渲染了。那要怎么才能做到設置動態 HTML 結構的效果呢？React.js 提供了一個屬性 dangerouslySetInnerHTML，可以讓我們設置動態設置元素的 innerHTML：

...
  render () {
    return (
      
    )
  }
...

需要給 dangerouslySetInnerHTML 傳入一個對象，這個對象的 __html 屬性值就相當于元素的 innerHTML，這樣我們就可以動態渲染元素的 innerHTML 結構了。

有寫朋友會覺得很奇怪，為什么要把一件這么簡單的事情搞得這么復雜，名字又長，還要傳入一個奇怪的對象。那是因為設置 innerHTML 可能會導致跨站腳本攻擊（XSS），所以 React.js 團隊認為把事情搞復雜可以防止（警示）大家濫用這個屬性。這個屬性不必要的情況就不要使用。

style

React.js 中的元素的 style 屬性的用法和 DOM 里面的 style 不大一樣，普通的 HTML 中的：

React.js 小書

在 React.js 中你需要把 CSS 屬性變成一個對象再傳給元素：

React.js 小書

style 接受一個對象，這個對象里面是這個元素的 CSS 屬性鍵值對，原來 CSS 屬性中帶 - 的元素都必須要去掉 - 換成駝峰命名，如 font-size 換成 fontSize，text-align 換成 textAlign。

用對象作為 style 方便我們動態設置元素的樣式。我們可以用 props 或者 state 中的數據生成樣式對象再傳給元素，然后用 setState 就可以修改樣式，非常靈活：

React.js 小書

只要簡單地 setState({color: "blue"}) 就可以修改元素的顏色成藍色。
{% endraw %}

下一節中我們將介紹《React.js 小書 Lesson24 - PropTypes 和組件參數驗證》。

GPU云服務器云服務器 React.js react.js cdn dangerouslySetHTML 小書

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89680.html

寫一本關于 React.js 的小書

摘要：因為工作中一直在使用，也一直以來想總結一下自己關于的一些知識經驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業簡單的入門級別的小書，提供給社區。本書的后續可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協議進行許可 React.js 小書本文作者：胡子大哈本文原文：React.js 小書轉載請注明出處，保留原文鏈接以及作者信息在線閱讀：http://huzi...

Scorpion 2019-08-21 11:39 評論0 收藏0
React.js 小書 Lesson22 - props.children 和容器類組件

摘要：由于會把插入表達式里面數組中的一個個羅列下來顯示。這樣通過這個布局組件，就可以在各個地方高度復用我們的布局。嵌套的結構在組件內部都可以通過獲取到，這種組件編寫方式在編寫容器類型的組件當中非常有用。下一節中我們將介紹小書和屬性。 React.js 小書 Lesson22 - props.children 和容器類組件本文作者：胡子大哈本文原文：http://huziketang.co...

番茄西紅柿 2019-08-21 17:34 評論0 收藏0
React.js 小書 Lesson7 - 組件的 render 方法

摘要：一個組件類必須要實現一個方法，這個方法必須要返回一個元素。你也可以把它改成，它就會顯示小書。注意，直接使用在的元素上添加類名如這種方式是不合法的。現在頁面上是顯示小書。下一節中我們將介紹小書組件的組合嵌套和組件樹。 React.js 小書 Lesson7 - 組件的 render 方法本文作者：胡子大哈本文原文：http://huziketang.com/books/react/l...

Near_Li 2019-08-21 17:33 評論0 收藏0
React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類

摘要：最后抽離出來了一個類，可以幫助我們更好的做組件化。一個組件有自己的顯示形態上面的結構和內容行為，組件的顯示形態和行為可以由數據狀態和配置參數共同決定。接下來我們開始正式進入主題，開始正式介紹。下一節鏈接直達小書基本環境安裝 React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類本文作者：胡子大哈本文原文：http://huziketang.com/books...

jsbintask 2019-08-21 17:32 評論0 收藏0
React.js 小書 Lesson8 - 組件的組合、嵌套和組件樹

摘要：小書最后頁面會顯示內容組件可以和組件組合在一起，組件內部可以使用別的組件。當頁面結構復雜起來，有許多不同的組件嵌套組合的話，組件樹會相當的復雜和龐大。下一節中我們將介紹小書事件監聽。 React.js 小書 Lesson8 - 組件的組合、嵌套和組件樹本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson8 轉載請注明出處，保留...

AbnerMing 2019-08-21 17:33 評論0 收藏0