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