React使用refs操作DOM方法詳解_第1頁(yè)
React使用refs操作DOM方法詳解_第2頁(yè)
React使用refs操作DOM方法詳解_第3頁(yè)
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第React使用refs操作DOM方法詳解在react框架甚至說(shuō)是三大框架中都是不太支持大家直接去操作dom的

因?yàn)橐矝](méi)什么必要

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

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

那就是refs

我們來(lái)簡(jiǎn)單寫(xiě)一個(gè)我們先在constructor中定義一個(gè)虛擬dom的控制

參考代碼如下

constructor(props){

super(props);

this.divDaimin=React.createRef()

this.state={

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

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

然后我們?cè)陧?yè)面上去寫(xiě)一個(gè)節(jié)點(diǎn)給我們聲明的divDaimin去控制

divclassName="App"

divref={this.divDaimin}你好/div

/div

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

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

componentDidMount(){

console.log(this.divDaimin);

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

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

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

componentDidMount(){

console.log(this.divDaimin.current);

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

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

我們改寫(xiě)componentDidMount中的代碼

componentDidMount(){

this.divDaimin.current.style.color="red";

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

沒(méi)有任何問(wèn)題

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論