詳解React獲取DOM和獲取組件實例的方式
React獲取DOM的方式
ref獲取DOM元素
在React的開發(fā)模式中，通常情況下不需要、也不建議直接操作DOM原生，但是某些特殊的情況，確實需要獲取到DOM進行某些操作:
管理焦點，文本選擇或媒體播放;
觸發(fā)強制動畫;
集成第三方 DOM 庫;
我們可以通過refs獲取DOM;
如何創(chuàng)建refs來獲取對應的DOM呢?目前有三種方式:
方式一:傳入字符串(這種做法已經不推薦)
在React元素上綁定一個ref字符串, 使用時通過
this.refs.傳入的字符串格式獲取對應的元素;
import React, { PureComponent } from 'react'
export class App extends PureComponent {
getDom() {
// 方式一
console.log(this.refs.hello) // <h2>Hello World</h2>
}
render() {
return (
<div>
<h2 ref="hello">Hello World</h2>
<button onClick={() => this.getDom()}>獲取DOM</button>
</div>
)
}
}
export default App
方式二:傳入一個對象(常用的方式, 推薦)
在react中導入createRef, 通過
createRef()方式提前創(chuàng)建出來一個對象, 將創(chuàng)建出來的對象綁定到要獲取的元素上;使用時獲取到創(chuàng)建的對象其中有一個
current屬性就是對應的元素;
import React, { PureComponent, createRef } from 'react'
export class App extends PureComponent {
constructor() {
super()
// 提前創(chuàng)建一個ref對象
this.titleRef = createRef()
}
getDom() {
// 方式二
console.log(this.titleRef.current) // <h2>Hello World</h2>
}
render() {
return (
<div>
<h2 ref={this.titleRef}>Hello World</h2>
<button onClick={() => this.getDom()}>獲取DOM</button>
</div>
)
}
}
export default App方式三:傳入一個函數(了解)
該函數會在DOM被掛載時進行回調，這個函數回調時會傳入一個元素對象，我們可以自己保存;
使用時，直接拿到之前保存的元素對象即可;
import React, { PureComponent, createRef } from 'react'
export class App extends PureComponent {
getDom() {
}
render() {
return (
<div>
<h2 ref="hello">Hello World</h2>
<h2 ref={this.titleRef}>Hello World</h2>
{/* 方式三, 回調函數會返回el, el就是我們要獲取的DOM了 */}
<h2 ref={el => console.log(el)}>Hello World</h2>
<button onClick={() => this.getDom()}>獲取DOM</button>
</div>
)
}
}
ref獲取組件實例
ref 的值根據節(jié)點的類型而有所不同:
當 ref 屬性用于 HTML 元素時，構造函數中使用 React.createRef() 創(chuàng)建的 ref 接收底層 DOM 元素作為其 current 屬性;
當 ref 屬性用于自定義 class 組件時，ref 對象接收組件的掛載實例作為其 current 屬性;
你
不能在函數組件上使用 ref 屬性，因為他們沒有實例;
這里我們演示一下ref獲取一個class組件對象的實例:
import React, { PureComponent, createRef } from 'react'
// 創(chuàng)建一個類組件, 作為子組件測試
class Test extends PureComponent {
test() {
console.log("Test");
}
render() {
return <h2>Test</h2>
}
}
export class App extends PureComponent {
constructor() {
super()
this.tsetRef = createRef()
}
getDom() {
// 獲取組件實例
console.log(this.tsetRef.current)
// 可以調用組件的實例方法
this.tsetRef.current.test()
}
render() {
return (
<div>
<Test ref={this.tsetRef}/>
</div>
)
}
}
export default App
函數式組件是沒有實例的，所以無法通過ref獲取他們的實例:
但是某些時候，我們可能想要獲取函數式組件中的某個DOM元素;
這個時候我們可以通過
React.forwardRef來綁定函數組件中的某個元素, forwardRef中接收兩個參數, 參數一: props, 參數二: ref，后面我們也會學習 hooks 中如何使用ref;
import { render } from '@testing-library/react';
import React, { PureComponent, createRef, forwardRef } from 'react'
}
// 創(chuàng)建一個函數組件, 作為子組件測試
// 使用forwardRef將函數包裹起來
const Foo = forwardRef(function(props, ref) {
return (
<h2 ref={ref}>Foo</h2>
)
})
export class App extends PureComponent {
constructor() {
super()
// 提前創(chuàng)建一個ref對象
this.fooRef = createRef()
}
getDom() {
// 獲取函數組件中元素的DOM
console.log(this.fooRef.current)
}
render() {
return (
<div>
<Foo ref={this.fooRef}/>
</div>
)
}
}
export default App
到此這篇關于React獲取DOM和獲取組件實例的方式的文章就介紹到這了,更多相關React獲取DOM內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了ahooks解決用戶多次提交的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
react-native android狀態(tài)欄的實現(xiàn)
這篇文章主要介紹了react-native android狀態(tài)欄的實現(xiàn)，使狀態(tài)欄顏色與App顏色一致，使用戶界面更加整體。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
一文詳解ReactNative狀態(tài)管理redux-toolkit使用
這篇文章主要為大家介紹了ReactNative狀態(tài)管理redux-toolkit使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
react18?hooks自定義移動端Popup彈窗組件RcPop
這篇文章主要介紹了react18?hooks自定義移動端Popup彈窗組件RcPop,react-popup?基于react18+hook自定義多功能彈框組件,整合了msg/alert/dialog/toast及android/ios彈窗效果,需要的朋友可以參考下2023-08-08
VSCode 配置React Native開發(fā)環(huán)境的方法
本篇文章主要介紹了VSCode 配置React Native開發(fā)環(huán)境的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Refs是一個 獲取 DOM節(jié)點或React元素實例的工具,在React中Refs 提供了一種方式,允許用戶訪問DOM 節(jié)點或者在render方法中創(chuàng)建的React元素,這篇文章主要給大家介紹了關于React中refs的一些常見用法,需要的朋友可以參考下2022-12-12
React?高德地圖進京證路線規(guī)劃問題記錄(匯總)
這篇文章主要介紹了React高德地圖進京證路線規(guī)劃問題小記,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08
路由是React項目中相當重要的概念，對于功能較為復雜的網頁來說，必然會涉及到不同功能間的頁面跳轉，本篇文章將對React官方維護的路由庫React-Router-Dom的使用和常用組件進行講解，同時對路由組件傳遞param參數的方式進行講解，希望對各位讀者有所參考2022-08-08
這篇文章主要為大家介紹了TypeScript在React中的應用技術實例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
本篇文章主要介紹了React組件通信詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10