React使用refs操作DOM方法詳解
在react框架 甚至說是三大框架中都是不太支持大家直接去操作dom的
因為也沒什么必要
當然也會有特殊情況 例如視頻播放 強制動畫 第三方插件的一些渲染或初始化
官方也給了我們對應(yīng)的解決辦法
那就是refs
我們來簡單寫一個 我們先在constructor中定義一個虛擬dom的控制
參考代碼如下
constructor(props){
super(props);
this.divDaimin = React.createRef()
this.state = {
}
}
這里 我們就通過React提供給我們的createRef函數(shù)聲明了一個叫divDaimin的控制dom節(jié)點
叫什么你們隨意 可以聲明無數(shù)個 這個對數(shù)量沒有限制
然后我們在頁面上去寫一個節(jié)點給我們聲明的divDaimin 去控制
<div className="App">
<div ref = { this.divDaimin }>你好</div>
</div>
這樣 我們這塊div元素就被divDaimin管理了
然后 componentDidMount生命周期是在頁面dom節(jié)點掛載完之后執(zhí)行的 那么我們就在componentDidMount生命周期里打印一下這個divDaimin
componentDidMount(){
console.log(this.divDaimin);
}
運行后效果如下
通過控制臺信息我們可以看到 current字段對應(yīng)的就是我們的元素
我們改一下componentDidMount內(nèi)的代碼
componentDidMount(){
console.log(this.divDaimin.current);
}
很明顯 我們的元素已經(jīng)是被輸出在控制臺上了
為了幫助大家確認我們確實是拿到這個元素了
我們改寫componentDidMount中的代碼
componentDidMount(){
this.divDaimin.current.style.color = "red";
}
我們用一個常規(guī)的js dom操作 將他的字體顏色改為紅色
沒有任何問題 這個東西一般情況下都是可以滿足你的需求的 甚至在react項目中他好可以幫助你實現(xiàn)更多你自己沒接觸過的用途
到此這篇關(guān)于React使用refs操作DOM方法詳解的文章就介紹到這了,更多相關(guān)React操作DOM內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了react hooks實現(xiàn)原理,文中給大家介紹了useState dispatch 函數(shù)如何與其使用的 Function Component 進行綁定，節(jié)后實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了react中Suspense的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了React嵌套組件的構(gòu)建順序，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家詳細介紹了react實現(xiàn)簡單的拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了react國際化react-intl的使用,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
在 React 中進行路由跳轉(zhuǎn)有多種方法,具體取決于你使用的路由庫和版本,以下是常見的路由跳轉(zhuǎn)方法匯總,主要基于 react-router-dom 庫,文中并通過代碼示例介紹的非常詳細,需要的朋友可以參考下2025-02-02
詳解使用WebPack搭建React開發(fā)環(huán)境
這篇文章主要介紹了詳解使用WebPack搭建React開發(fā)環(huán)境，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
react循環(huán)數(shù)據(jù)(列表)的實現(xiàn)
這篇文章主要介紹了react循環(huán)數(shù)據(jù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要為大家詳細介紹了React實現(xiàn)全選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
很多小伙伴在第一次嘗試封裝組件時會和我一樣碰到許多問題，本文主要介紹了基于React封裝組件的實現(xiàn)步驟，感興趣的可以了解一下2021-11-11