React怎么使用refs操作DOM

發布時間：2022-11-03 10:51:58 來源：億速云閱讀：185 作者：iii 欄目：開發技術

本文小編為大家詳細介紹“React怎么使用refs操作DOM”，內容詳細，步驟清晰，細節處理妥當，希望這篇“React怎么使用refs操作DOM”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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

因為也沒什么必要

當然也會有特殊情況例如視頻播放強制動畫第三方插件的一些渲染或初始化

官方也給了我們對應的解決辦法

那就是refs

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

參考代碼如下

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

這里我們就通過React提供給我們的createRef函數聲明了一個叫divDaimin的控制dom節點

叫什么你們隨意可以聲明無數個這個對數量沒有限制

然后我們在頁面上去寫一個節點給我們聲明的divDaimin 去控制

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

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

然后 componentDidMount生命周期是在頁面dom節點掛載完之后執行的那么我們就在componentDidMount生命周期里打印一下這個divDaimin

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

運行后效果如下

React怎么使用refs操作DOM

通過控制臺信息我們可以看到 current字段對應的就是我們的元素

我們改一下componentDidMount內的代碼

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

React怎么使用refs操作DOM

很明顯我們的元素已經是被輸出在控制臺上了

為了幫助大家確認我們確實是拿到這個元素了

我們改寫componentDidMount中的代碼

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

我們用一個常規的js dom操作將他的字體顏色改為紅色

React怎么使用refs操作DOM

讀到這里，這篇“React怎么使用refs操作DOM”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站