成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

React中的小知識(shí)點(diǎn)

niceforbear / 3114人閱讀

摘要：配置默認(rèn)和中的操作并不能完全滿足所有操作需求，有些時(shí)候還是需要和打交道。當(dāng)中提供了屬性來(lái)幫助我們獲取已經(jīng)掛載元素的節(jié)點(diǎn)。當(dāng)元素在頁(yè)面上掛載完成以后，就會(huì)調(diào)用這個(gè)函數(shù)，并且把這個(gè)掛載以后的節(jié)點(diǎn)傳給這個(gè)函數(shù)。

配置默認(rèn) defaultProps 
class ExampleComponent extends React.Component{
    static defaultProps = {
        value: 0
    }
    ...
}

/*-------------------------------*/
class ExampleComponent extends React.Component{
    ...
}
ExampleComponent.defaultProps = {
    value: 0
}
ref和React中的DOM操作

React.js并不能完全滿足所有DOM操作需求，有些時(shí)候還是需要和DOM打交道。比如進(jìn)入頁(yè)面后自動(dòng)focus到某個(gè)輸入框，這是需要調(diào)用input.focus()的DOM API。React當(dāng)中提供了ref屬性來(lái)幫助我們獲取 已經(jīng)掛載元素 的DOM節(jié)點(diǎn)。具體的使用方法如下：

class ExampleInput extends Component {
  componentDidMount () { 
    this.input.focus()
  }

  render () {
    return (
       this.input = input} />
    )
  }
}

可以看到我們給 input 元素加了一個(gè) ref 屬性，這個(gè)屬性值是一個(gè)函數(shù)。當(dāng) input 元素在頁(yè)面上掛載完成以后 ，React 就會(huì)調(diào)用這個(gè)函數(shù)，并且把這個(gè)掛載以后的 DOM 節(jié)點(diǎn)傳給這個(gè)函數(shù)。在函數(shù)中我們把這個(gè) DOM 元素設(shè)置為組件實(shí)例的一個(gè)屬性，這樣以后我們就可以通過(guò) this.input 獲取到這個(gè) DOM 元素。

dangerouslySetInnerHTML

出于安全考慮的原因（XSS 攻擊），在 React當(dāng)中所有通過(guò)表達(dá)式插入的內(nèi)容都會(huì)被自動(dòng)轉(zhuǎn)義

class ExampleComponent extends React.Component {
  render () {
    const content = "
Hello World
"
    return (
      

        {content}  
      

    )
  }
}

在上面的例子中，content的內(nèi)容會(huì)被自動(dòng)轉(zhuǎn)義，當(dāng)組件被渲染后，頁(yè)面顯示的是文本形式的"

Hello World

"

如果想要?jiǎng)討B(tài)的向元素內(nèi)部插入新的元素內(nèi)容，該如何做呢？這時(shí)就需要使用dangerouslySetInnerHTML屬性了

class ExampleComponent extends React.Component {
  render () {
    const content = "
Hello World
"
    return (
      
 
    )
  }
}
組件參數(shù)驗(yàn)證

React提供了一種機(jī)制，可以給props中的屬性進(jìn)行類型驗(yàn)證.如果需要對(duì)參數(shù)進(jìn)行類型驗(yàn)證，需要安裝一個(gè)由React提供的第三方庫(kù)prop-types

安裝prop-types

npm install --save prop-types

使用prop-types驗(yàn)證參數(shù)類型 
import React, { Component } from "react"
import PropTypes from "prop-types"

class Comment extends Component {
  static propTypes = {
    comment: PropTypes.object  // 要求 this.props.comment 必須是 object類型
  }
....

prop-types提供的數(shù)據(jù)類型

PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string
PropTypes.node
PropTypes.element
...

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/83295.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及前端開(kāi)發(fā)入門(mén)的小項(xiàng)目推薦

    摘要：最近剛進(jìn)入公司實(shí)習(xí)，找工作的過(guò)程中發(fā)現(xiàn)還是基礎(chǔ)比較重要吧。分享一些關(guān)于前端開(kāi)發(fā)入門(mén)和入門(mén)的小項(xiàng)目小任務(wù)吧。百度前端技術(shù)學(xué)院的任務(wù)其實(shí)能把百度前端技術(shù)學(xué)院的任務(wù)做完就很不錯(cuò)啦，這里推薦幾個(gè)比較好的任務(wù)。可以學(xué)到前端工程化和入門(mén)的相關(guān)知識(shí)。 最近剛進(jìn)入公司實(shí)習(xí)，找工作的過(guò)程中發(fā)現(xiàn)還是基礎(chǔ)比較重要吧。分享一些關(guān)于前端開(kāi)發(fā)入門(mén)和React入門(mén)的小項(xiàng)目（小任務(wù)）吧。 百度前端技術(shù)學(xué)院的任務(wù) 其實(shí)...

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

  • 2017文章總結(jié)

    摘要：歡迎來(lái)我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開(kāi)啟性能優(yōu)化之旅高性能滾動(dòng)及頁(yè)面渲染優(yōu)化理論寫(xiě)法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁(yè)瞬開(kāi)緩存網(wǎng)頁(yè)性能管理詳解寫(xiě)給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來(lái)我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開(kāi)啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁(yè)面渲染優(yōu)化 理論 | HTML寫(xiě)法...

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

  • 2017文章總結(jié)

    摘要：歡迎來(lái)我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開(kāi)啟性能優(yōu)化之旅高性能滾動(dòng)及頁(yè)面渲染優(yōu)化理論寫(xiě)法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁(yè)瞬開(kāi)緩存網(wǎng)頁(yè)性能管理詳解寫(xiě)給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來(lái)我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開(kāi)啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁(yè)面渲染優(yōu)化 理論 | HTML寫(xiě)法...

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

  • 2017文章總結(jié)

    摘要：歡迎來(lái)我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開(kāi)啟性能優(yōu)化之旅高性能滾動(dòng)及頁(yè)面渲染優(yōu)化理論寫(xiě)法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁(yè)瞬開(kāi)緩存網(wǎng)頁(yè)性能管理詳解寫(xiě)給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來(lái)我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開(kāi)啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁(yè)面渲染優(yōu)化 理論 | HTML寫(xiě)法...

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

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

0條評(píng)論

閱讀需要支付1元查看
<