欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React使用refs操作DOM方法詳解

 更新時(shí)間：2022年11月01日 17:21:05   作者：-耿瑞-  
React核心就在于虛擬DOM，也就是在React中不總是直接操作頁面真實(shí)的DOM元素，并且結(jié)合Diffing算法，可以做到最小化頁面重繪，有些時(shí)候不可避免的我們需要一種方法可以操作我們定義的元素標(biāo)簽，并作出對(duì)應(yīng)的修改。在React中提供了一種訪問DOM節(jié)點(diǎn)的方式，也就是這里的refs

在react框架 甚至說是三大框架中都是不太支持大家直接去操作dom的

因?yàn)橐矝]什么必要

當(dāng)然也會(huì)有特殊情況 例如視頻播放 強(qiáng)制動(dòng)畫 第三方插件的一些渲染或初始化

官方也給了我們對(duì)應(yīng)的解決辦法

那就是refs

我們來簡單寫一個(gè) 我們先在constructor中定義一個(gè)虛擬dom的控制

參考代碼如下

constructor(props){
 super(props);
 this.divDaimin = React.createRef()
 this.state = {
 }
}

這里 我們就通過React提供給我們的createRef函數(shù)聲明了一個(gè)叫divDaimin的控制dom節(jié)點(diǎn)

叫什么你們隨意 可以聲明無數(shù)個(gè) 這個(gè)對(duì)數(shù)量沒有限制

然后我們在頁面上去寫一個(gè)節(jié)點(diǎn)給我們聲明的divDaimin 去控制

<div className="App">
   <div ref = { this.divDaimin }>你好</div>
</div>

這樣 我們這塊div元素就被divDaimin管理了

然后 componentDidMount生命周期是在頁面dom節(jié)點(diǎn)掛載完之后執(zhí)行的 那么我們就在componentDidMount生命周期里打印一下這個(gè)divDaimin

componentDidMount(){
 console.log(this.divDaimin);
}

運(yùn)行后效果如下

通過控制臺(tái)信息我們可以看到 current字段對(duì)應(yīng)的就是我們的元素

我們改一下componentDidMount內(nèi)的代碼

componentDidMount(){
   console.log(this.divDaimin.current);
 }

很明顯 我們的元素已經(jīng)是被輸出在控制臺(tái)上了

為了幫助大家確認(rèn)我們確實(shí)是拿到這個(gè)元素了

我們改寫componentDidMount中的代碼

componentDidMount(){
     this.divDaimin.current.style.color = "red";
  }

我們用一個(gè)常規(guī)的js dom操作 將他的字體顏色改為紅色

沒有任何問題 這個(gè)東西一般情況下都是可以滿足你的需求的 甚至在react項(xiàng)目中他好可以幫助你實(shí)現(xiàn)更多你自己沒接觸過的用途

到此這篇關(guān)于React使用refs操作DOM方法詳解的文章就介紹到這了,更多相關(guān)React操作DOM內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論