React使用refs操作DOM方法詳解
在react框架 甚至說是三大框架中都是不太支持大家直接去操作dom的
因?yàn)橐矝]什么必要
當(dāng)然也會(huì)有特殊情況 例如視頻播放 強(qiáng)制動(dòng)畫 第三方插件的一些渲染或初始化
官方也給了我們對(duì)應(yīng)的解決辦法
那就是refs
我們來簡(jiǎn)單寫一個(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ù)量沒有限制
然后我們?cè)陧?yè)面上去寫一個(gè)節(jié)點(diǎn)給我們聲明的divDaimin 去控制
<div className="App">
<div ref = { this.divDaimin }>你好</div>
</div>
這樣 我們這塊div元素就被divDaimin管理了
然后 componentDidMount生命周期是在頁(yè)面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)文章
這篇文章主要介紹了react hooks實(shí)現(xiàn)原理,文中給大家介紹了useState dispatch 函數(shù)如何與其使用的 Function Component 進(jìn)行綁定，節(jié)后實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了react中Suspense的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了React嵌套組件的構(gòu)建順序，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
react實(shí)現(xiàn)簡(jiǎn)單的拖拽功能
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)簡(jiǎn)單的拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了react國(guó)際化react-intl的使用,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
在 React 中進(jìn)行路由跳轉(zhuǎn)有多種方法,具體取決于你使用的路由庫(kù)和版本,以下是常見的路由跳轉(zhuǎn)方法匯總,主要基于 react-router-dom 庫(kù),文中并通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
詳解使用WebPack搭建React開發(fā)環(huán)境
這篇文章主要介紹了詳解使用WebPack搭建React開發(fā)環(huán)境，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
react循環(huán)數(shù)據(jù)(列表)的實(shí)現(xiàn)
這篇文章主要介紹了react循環(huán)數(shù)據(jù)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)全選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
很多小伙伴在第一次嘗試封裝組件時(shí)會(huì)和我一樣碰到許多問題，本文主要介紹了基于React封裝組件的實(shí)現(xiàn)步驟，感興趣的可以了解一下2021-11-11