您好,登錄后才能下訂單哦!
這篇文章主要講解了“React怎么獲取DOM和組件”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“React怎么獲取DOM和組件”吧!
在React的開(kāi)發(fā)模式中,通常情況下不需要、也不建議直接操作DOM原生,但是某些特殊的情況,確實(shí)需要獲取到DOM進(jìn)行某些操作:
管理焦點(diǎn),文本選擇或媒體播放;
觸發(fā)強(qiáng)制動(dòng)畫(huà);
集成第三方 DOM 庫(kù);
我們可以通過(guò)refs獲取DOM;
如何創(chuàng)建refs來(lái)獲取對(duì)應(yīng)的DOM呢?目前有三種方式:
方式一:傳入字符串
(這種做法已經(jīng)不推薦)
在React元素上綁定一個(gè)ref字符串, 使用時(shí)通過(guò)
this.refs.傳入的字符串
格式獲取對(duì)應(yīng)的元素;
import React, { PureComponent } from 'react' export class App extends PureComponent { getDom() { // 方式一 console.log(this.refs.hello) // <h3>Hello World</h3> } render() { return ( <div> <h3 ref="hello">Hello World</h3> <button onClick={() => this.getDom()}>獲取DOM</button> </div> ) } } export default App
方式二:傳入一個(gè)對(duì)象
(常用的方式, 推薦)
在react中導(dǎo)入createRef, 通過(guò)
createRef()
方式提前創(chuàng)建出來(lái)一個(gè)對(duì)象, 將創(chuàng)建出來(lái)的對(duì)象綁定到要獲取的元素上;使用時(shí)獲取到創(chuàng)建的對(duì)象其中有一個(gè)
current
屬性就是對(duì)應(yīng)的元素;
import React, { PureComponent, createRef } from 'react' export class App extends PureComponent { constructor() { super() // 提前創(chuàng)建一個(gè)ref對(duì)象 this.titleRef = createRef() } getDom() { // 方式二 console.log(this.titleRef.current) // <h3>Hello World</h3> } render() { return ( <div> <h3 ref={this.titleRef}>Hello World</h3> <button onClick={() => this.getDom()}>獲取DOM</button> </div> ) } } export default App
方式三:傳入一個(gè)函數(shù)
(了解)
該函數(shù)會(huì)在DOM被掛載時(shí)進(jìn)行回調(diào),這個(gè)函數(shù)回調(diào)時(shí)會(huì)傳入一個(gè)元素對(duì)象,我們可以自己保存;
使用時(shí),直接拿到之前保存的元素對(duì)象即可;
import React, { PureComponent, createRef } from 'react' export class App extends PureComponent { getDom() { } render() { return ( <div> <h3 ref="hello">Hello World</h3> <h3 ref={this.titleRef}>Hello World</h3> {/* 方式三, 回調(diào)函數(shù)會(huì)返回el, el就是我們要獲取的DOM了 */} <h3 ref={el => console.log(el)}>Hello World</h3> <button onClick={() => this.getDom()}>獲取DOM</button> </div> ) } }
ref 的值根據(jù)節(jié)點(diǎn)的類(lèi)型而有所不同:
當(dāng) ref 屬性用于 HTML 元素時(shí),構(gòu)造函數(shù)中使用 React.createRef() 創(chuàng)建的 ref 接收底層 DOM 元素作為其 current 屬性;
當(dāng) ref 屬性用于自定義 class 組件時(shí),ref 對(duì)象接收組件的掛載實(shí)例作為其 current 屬性;
你
不能在函數(shù)組件上使用 ref 屬性
,因?yàn)樗麄儧](méi)有實(shí)例;
這里我們演示一下ref獲取一個(gè)class組件對(duì)象的實(shí)例:
import React, { PureComponent, createRef } from 'react' // 創(chuàng)建一個(gè)類(lèi)組件, 作為子組件測(cè)試 class Test extends PureComponent { test() { console.log("Test"); } render() { return <h3>Test</h3> } } export class App extends PureComponent { constructor() { super() this.tsetRef = createRef() } getDom() { // 獲取組件實(shí)例 console.log(this.tsetRef.current) // 可以調(diào)用組件的實(shí)例方法 this.tsetRef.current.test() } render() { return ( <div> <Test ref={this.tsetRef}/> </div> ) } } export default App
函數(shù)式組件是沒(méi)有實(shí)例的,所以無(wú)法通過(guò)ref獲取他們的實(shí)例:
但是某些時(shí)候,我們可能想要獲取函數(shù)式組件中的某個(gè)DOM元素;
這個(gè)時(shí)候我們可以通過(guò)
React.forwardRef
來(lái)綁定函數(shù)組件中的某個(gè)元素, forwardRef中接收兩個(gè)參數(shù), 參數(shù)一: props, 參數(shù)二: ref,后面我們也會(huì)學(xué)習(xí) hooks 中如何使用ref;
import { render } from '@testing-library/react'; import React, { PureComponent, createRef, forwardRef } from 'react' } // 創(chuàng)建一個(gè)函數(shù)組件, 作為子組件測(cè)試 // 使用forwardRef將函數(shù)包裹起來(lái) const Foo = forwardRef(function(props, ref) { return ( <h3 ref={ref}>Foo</h3> ) }) export class App extends PureComponent { constructor() { super() // 提前創(chuàng)建一個(gè)ref對(duì)象 this.fooRef = createRef() } getDom() { // 獲取函數(shù)組件中元素的DOM console.log(this.fooRef.current) } render() { return ( <div> <Foo ref={this.fooRef}/> </div> ) } } export default App
感謝各位的閱讀,以上就是“React怎么獲取DOM和組件”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)React怎么獲取DOM和組件這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。