react組件中獲取DOM元素的五種方式
更新時(shí)間：2025年01月15日 08:26:29 作者：小企鵝子慢慢
本文主要介紹了React組件中獲取DOM元素的五種方式：包括使用ref屬性、構(gòu)造器創(chuàng)建全局變量、動(dòng)態(tài)綁定ref屬性、綁定函數(shù)定義全局變量和使用hook語法查找DOM,感興趣的可以了解一下
1, 給標(biāo)簽設(shè)置ref屬性, 通過this.refs調(diào)用 (老版本語法,將要廢除)
<h1 ref="myH1"></h1>
this.refs.myH12, 在構(gòu)造器中創(chuàng)建ref全局變量, 在標(biāo)簽中ref屬性動(dòng)態(tài)綁定這個(gè)全局變量, 通過全局變量的current字段調(diào)用
this.myH2 = React.createRef()
<h2 ref={this.myH2}></h2>
this.myH2.current3, 在標(biāo)簽ref屬性綁定函數(shù), 在函數(shù)中定義全局變量賦值, 通過全局變量調(diào)用
<h3 ref={ ele => this.myH3 = ele }></h3>
this.myH34, 使用hook語法查找DOM
const d1 = useRef()
<div id="d1" ref={d1}>div1</div>
d1.current5, 使用hook語法查找DOM
const d2 = useRef()
<div id="d2" ref={el => d2=el}>div1</div>
d2到此這篇關(guān)于react組件中獲取DOM元素的五種方式的文章就介紹到這了,更多相關(guān)react Dom操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了React 實(shí)現(xiàn)表單組件的示例代碼,支持包括輸入狀態(tài)管理,表單驗(yàn)證,錯(cuò)誤信息展示,表單提交,動(dòng)態(tài)表單元素等功能,具有一定的參考價(jià)值,感興趣的可以了解一下2024-07-07
React 是一個(gè)用于構(gòu)建用戶界面的 JavaScript 庫(kù)，主要用于構(gòu)建 UI，而不是一個(gè) MVC 框架，React 擁有較高的性能，代碼邏輯非常簡(jiǎn)單，越來越多的人已開始關(guān)注和使用它2017-05-05
React Native如何消除啟動(dòng)時(shí)白屏的方法
本篇文章主要介紹了React Native如何消除啟動(dòng)時(shí)白屏的方法，詳細(xì)的介紹了解決的方法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了詳解各版本React路由的跳轉(zhuǎn)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了react中useRef的應(yīng)用使用詳解的相關(guān)資料,需要的朋友可以參考下2023-05-05
React如何實(shí)現(xiàn)全屏監(jiān)聽Esc鍵
這篇文章主要介紹了React如何實(shí)現(xiàn)全屏監(jiān)聽Esc鍵，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
React組件用來實(shí)現(xiàn)局部功能效果的代碼和資源的集合(html/css/js/image等等)，這篇文章主要介紹了React組件的用法和理解,需要的朋友可以參考下2023-02-02
TypeScript在React中的應(yīng)用技術(shù)實(shí)例解析
這篇文章主要為大家介紹了TypeScript在React中的應(yīng)用技術(shù)實(shí)例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
react組件memo useMemo useCallback使用區(qū)別示例
這篇文章主要為大家介紹了react組件memo useMemo useCallback使用區(qū)別的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
關(guān)于getDerivedStateFromProps填坑記錄
這篇文章主要介紹了關(guān)于getDerivedStateFromProps填坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06