React使用refs操作DOM方法詳解
在react框架 甚至說是三大框架中都是不太支持大家直接去操作dom的
因為也沒什么必要
當然也會有特殊情況 例如視頻播放 強制動畫 第三方插件的一些渲染或初始化
官方也給了我們對應的解決辦法
那就是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字段對應的就是我們的元素
我們改一下componentDidMount內的代碼
componentDidMount(){
console.log(this.divDaimin.current);
}
很明顯 我們的元素已經是被輸出在控制臺上了
為了幫助大家確認我們確實是拿到這個元素了
我們改寫componentDidMount中的代碼
componentDidMount(){
this.divDaimin.current.style.color = "red";
}
我們用一個常規(guī)的js dom操作 將他的字體顏色改為紅色
沒有任何問題 這個東西一般情況下都是可以滿足你的需求的 甚至在react項目中他好可以幫助你實現(xiàn)更多你自己沒接觸過的用途
到此這篇關于React使用refs操作DOM方法詳解的文章就介紹到這了,更多相關React操作DOM內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了React手寫一個手風琴組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
解決antd的Table組件使用rowSelection屬性實現(xiàn)多選時遇到的bug
這篇文章主要介紹了解決antd的Table組件使用rowSelection屬性實現(xiàn)多選時遇到的bug問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
react配合antd組件實現(xiàn)的管理系統(tǒng)示例代碼
這篇文章主要介紹了react配合antd組件實現(xiàn)的管理系統(tǒng)示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
登錄、注冊、找回密碼是前端項目經常遇到的需求,本文主要介紹了React實現(xiàn)簡單登錄的項目實踐,具有一定的參考價值,感興趣的可以了解一下2024-01-01
react中使用forEach或map兩種方式遍歷數(shù)組
這篇文章主要介紹了react中使用forEach或map兩種方式遍歷數(shù)組，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Hook是一種函數(shù)，它可以讓你在函數(shù)組件中“掛鉤”到React狀態(tài)和生命周期等特性，這篇文章主要和大家介紹了React中Hook的作用和用處，希望對大家有所幫助2023-05-05
React useMemo和useCallback的使用場景
這篇文章主要介紹了React useMemo和useCallback的使用場景，幫助大家更好的理解和學習使用React框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家介紹了React常見跨窗口通信方式實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章給大家介紹了在React中如何實現(xiàn)雙向綁定，文中給出了示例代碼，對大家的理解與學習很有幫助，有需要的朋友下面來一起看看吧。2016-09-09
react組件從搭建腳手架到在npm發(fā)布的步驟實現(xiàn)
這篇文章主要介紹了react組件從搭建腳手架到在npm發(fā)布的步驟實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01