亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

React.js 小書(shū) Lesson23 - dangerouslySetHTML 和 style

curried / 3498人閱讀

摘要：那是因?yàn)樵O(shè)置可能會(huì)導(dǎo)致跨站腳本攻擊，所以團(tuán)隊(duì)認(rèn)為把事情搞復(fù)雜可以防止警示大家濫用這個(gè)屬性。下一節(jié)中我們將介紹小書(shū)和組件參數(shù)驗(yàn)證。

React.js 小書(shū) Lesson23 - dangerouslySetHTML 和 style 屬性 
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson23

轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息

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

{% raw %}
這一節(jié)我們來(lái)補(bǔ)充兩個(gè)之前沒(méi)有提到的屬性，但是在 React.js 組件開(kāi)發(fā)中也非常常用，但是它們也很簡(jiǎn)單。

dangerouslySetHTML

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

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

  render () {
    return (
      

        {this.state.content}
      

    )
  }
}

假設(shè)上面是一個(gè)富文本編輯器組件，富文本編輯器的內(nèi)容是動(dòng)態(tài)的 HTML 內(nèi)容，用 this.state.content 來(lái)保存。我希望在編輯器內(nèi)部顯示這個(gè)動(dòng)態(tài) HTML 結(jié)構(gòu)，但是因?yàn)?React.js 的轉(zhuǎn)義特性，頁(yè)面上會(huì)顯示：

表達(dá)式插入并不會(huì)把一個(gè)

渲染到頁(yè)面，而是把它的文本形式渲染了。那要怎么才能做到設(shè)置動(dòng)態(tài) HTML 結(jié)構(gòu)的效果呢？React.js 提供了一個(gè)屬性 dangerouslySetInnerHTML，可以讓我們?cè)O(shè)置動(dòng)態(tài)設(shè)置元素的 innerHTML：

...
  render () {
    return (
      

    )
  }
...

需要給 dangerouslySetInnerHTML 傳入一個(gè)對(duì)象，這個(gè)對(duì)象的 __html 屬性值就相當(dāng)于元素的 innerHTML，這樣我們就可以動(dòng)態(tài)渲染元素的 innerHTML 結(jié)構(gòu)了。

有寫(xiě)朋友會(huì)覺(jué)得很奇怪，為什么要把一件這么簡(jiǎn)單的事情搞得這么復(fù)雜，名字又長(zhǎng)，還要傳入一個(gè)奇怪的對(duì)象。那是因?yàn)樵O(shè)置 innerHTML 可能會(huì)導(dǎo)致跨站腳本攻擊（XSS），所以 React.js 團(tuán)隊(duì)認(rèn)為把事情搞復(fù)雜可以防止（警示）大家濫用這個(gè)屬性。這個(gè)屬性不必要的情況就不要使用。

style

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

React.js 小書(shū)

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

React.js 小書(shū)

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

用對(duì)象作為 style 方便我們動(dòng)態(tài)設(shè)置元素的樣式。我們可以用 props 或者 state 中的數(shù)據(jù)生成樣式對(duì)象再傳給元素，然后用 setState 就可以修改樣式，非常靈活：

React.js 小書(shū)

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

下一節(jié)中我們將介紹《React.js 小書(shū) Lesson24 - PropTypes 和組件參數(shù)驗(yàn)證》。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/89680.html

相關(guān)文章

  • 寫(xiě)一本關(guān)于 React.js 的小書(shū)

    摘要：因?yàn)楣ぷ髦幸恢痹谑褂?，也一直以?lái)想總結(jié)一下自己關(guān)于的一些知識(shí)經(jīng)驗(yàn)。于是把一些想法慢慢整理書(shū)寫(xiě)下來(lái)，做成一本開(kāi)源免費(fèi)專業(yè)簡(jiǎn)單的入門(mén)級(jí)別的小書(shū)，提供給社區(qū)。本書(shū)的后續(xù)可能會(huì)做成視頻版本，敬請(qǐng)期待。本作品采用署名禁止演繹國(guó)際許可協(xié)議進(jìn)行許可 React.js 小書(shū) 本文作者：胡子大哈本文原文：React.js 小書(shū) 轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息 在線閱讀：http://huzi...

    Scorpion 評(píng)論0 收藏0

  • React.js 小書(shū) Lesson22 - props.children 和容器類組件

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

    番茄西紅柿 評(píng)論0 收藏0

  • React.js 小書(shū) Lesson7 - 組件的 render 方法

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

    Near_Li 評(píng)論0 收藏0

  • React.js 小書(shū) Lesson4 - 前端組件化（三）：抽象出公共組件類

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

    jsbintask 評(píng)論0 收藏0

  • React.js 小書(shū) Lesson8 - 組件的組合、嵌套和組件樹(shù)

    摘要：小書(shū)最后頁(yè)面會(huì)顯示內(nèi)容組件可以和組件組合在一起，組件內(nèi)部可以使用別的組件。當(dāng)頁(yè)面結(jié)構(gòu)復(fù)雜起來(lái)，有許多不同的組件嵌套組合的話，組件樹(shù)會(huì)相當(dāng)?shù)膹?fù)雜和龐大。下一節(jié)中我們將介紹小書(shū)事件監(jiān)聽(tīng)。 React.js 小書(shū) Lesson8 - 組件的組合、嵌套和組件樹(shù) 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson8 轉(zhuǎn)載請(qǐng)注明出處，保留...

    AbnerMing 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<