成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

初識React(4)：ref屬性

curried / 907人閱讀

摘要：屬性其實(shí)就是為了獲取節(jié)點(diǎn)，例如屬性利用屬性返回的回調(diào)函數(shù)獲取節(jié)點(diǎn)，從而讓頁面渲染完成之后，聚焦，除了可以綁定回調(diào)函數(shù)之外還能綁定字符串，但是在后期對字符串形式不再維護(hù)，這里就不具體說明了，就用回調(diào)函數(shù)獲取。

ref屬性其實(shí)就是為了獲取DOM節(jié)點(diǎn)，例如：

import React from "react"

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
  }
   render() {
     return (
       

          
ref屬性

           this.inputNode = node}/>
       

     )
   }
}

export default RefComponent;

利用ref屬性返回的回調(diào)函數(shù)獲取DOM節(jié)點(diǎn)，從而讓頁面渲染完成之后，input聚焦，ref除了可以綁定回調(diào)函數(shù)之外還能綁定字符串，但是在后期react對字符串形式不再維護(hù)，這里就不具體說明了，就用回調(diào)函數(shù)獲取DOM。

除了給input聚焦之外，還可以獲取當(dāng)前DOM節(jié)點(diǎn)的內(nèi)容，如下：

import React from "react"

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
     console.log(this.texthtml);
     console.log(this.texthtml.innerHTML);
  }
   render() {
     return (
       

          
ref屬性

           this.inputNode = node}/>
          
 this.texthtml = node}>你好

       

     )
   }
}

export default RefComponent;

輸出結(jié)果為：

你好

你好

在這里，我們也發(fā)現(xiàn)一個問題，ref雖然獲取DOM節(jié)點(diǎn)很方便，但是如果ref用的多了，后期就不好維護(hù)了，所以，盡量能少用即少用。

ref除了可以給HTML標(biāo)簽添加，也可以給組件添加，例如：

import React from "react"
import Button from "./button.js"

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
     console.log(this.texthtml);
     console.log(this.texthtml.innerHTML);
     console.log(this.buttonNode);
  }
   render() {
     return (
       

          
ref屬性

           this.inputNode = node}/>
          
 this.texthtml = node}>你好

          

     )
   }
}

export default RefComponent;

但是此時，this.buttonNode得到的是一個Button這個組件實(shí)例DOM

這里要注意一個問題，ref只能用在類定義的組件，不能用在函數(shù)組件，因?yàn)楹瘮?shù)組件沒有實(shí)例，比如以下寫法就是錯誤的：

import React from "react"

function TestComponent() {
   return (
    
函數(shù)組件

   );
}

class RefComponent extends React.Component {
  componentDidMount(){
     console.log(this.testCom);
  }
   render() {
     return (
       

          
函數(shù)組件

           this.testCom = node}/>
       

     )
   }
}

export default RefComponent;

如果這樣寫，則會報(bào)錯，并且this.testCom為undefined，因?yàn)榇藭r是獲取不到函數(shù)組件的實(shí)例的，所以以上寫法要注意

總結(jié)： ref可以給HTML標(biāo)簽，類組件添加，但是不能給函數(shù)組件添加

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97014.html

相關(guān)文章

  • React系列---React（二）組件的prop和state

    摘要：給賦值也是構(gòu)造函數(shù)的工作之一。在的構(gòu)造函數(shù)中，還給兩個成員函數(shù)綁定了當(dāng)前的執(zhí)行環(huán)境，因?yàn)榉绞絼?chuàng)建的組件并不自動給我們綁定到當(dāng)前實(shí)例對象。我們可以利用的功能，避免判斷邏輯這種充斥在構(gòu)造函數(shù)之中，讓代碼更優(yōu)。 React系列---React（一）初識ReactReact系列---React（二）組件的prop和stateReact系列---React（三）組件的生命周期 組件是React...

    Labradors 評論0 收藏0

  • [源碼閱讀]通過react-infinite-scroller理解滾動加載要點(diǎn)

    摘要：看它的源碼主要意義不在知道如何使用它，而是知道以后處理滾動加載要注意的東西。通過判斷不為的情況，確保滾動組件正常顯示和在無滾動的情況下，和相等，都為在有滾動的情況下，表示實(shí)際內(nèi)容高度，表示視口高度。 react-infinite-scroller就是一個組件，主要邏輯就是addEventListener綁定scroll事件。 看它的源碼主要意義不在知道如何使用它，而是知道以后處理滾動加...

    cikenerd 評論0 收藏0

  • react開發(fā)教程（－）初識

    摘要：定義一個組件可以在其他組件中調(diào)用這個組件調(diào)用組件劉宇組件插入內(nèi)容在上面的案例中可以看到吧寫到當(dāng)中，這種寫法稱為。 React初識 React是Facebook推出的一個javascript庫(用來創(chuàng)建用戶界面的Javascript庫)，所以他只是和用戶的界面打交道，你可以把它看成MVC中的V(視圖)這一層。 組件 React的一切都是基于組件的。web世界的構(gòu)成是基于各種HTML標(biāo)簽的...

    Allen 評論0 收藏0

  • 初識redux

    摘要：主要用于構(gòu)建，很多人認(rèn)為是中的視圖。函數(shù)接受另一個函數(shù)作為參數(shù)，返回新生成的對象的變化，會導(dǎo)致的變化。用戶無法直接改變只能觸發(fā)上綁定的事件。表示應(yīng)該要發(fā)生變化了。允許使用方法設(shè)置監(jiān)聽函數(shù)，一旦發(fā)生變化，就自動執(zhí)行這個函數(shù)。 什么是react React 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫。React主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。...

    xumenger 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<