快捷導(dǎo)航

詳解React獲取DOM和獲取組件實(shí)例的方式

更新時(shí)間：2022年10月08日 16:45:53 作者：林有酒

這篇文章主要介紹了React獲取DOM和獲取組件實(shí)例的方式,如何創(chuàng)建refs來(lái)獲取對(duì)應(yīng)的DOM呢?目前有三種方式，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

React獲取DOM的方式

ref獲取DOM元素

在React的開(kāi)發(fā)模式中，通常情況下不需要、也不建議直接操作DOM原生，但是某些特殊的情況，確實(shí)需要獲取到DOM進(jìn)行某些操作:

管理焦點(diǎn)，文本選擇或媒體播放;

觸發(fā)強(qiáng)制動(dòng)畫;

集成第三方 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) // <h2>Hello World</h2>
  }
  
  render() {
    return (
      <div>
        <h2 ref="hello">Hello World</h2>
        <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) // <h2>Hello World</h2>
  }
  
  render() {
    return (
      <div>
        <h2 ref={this.titleRef}>Hello World</h2>
        <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>
        <h2 ref="hello">Hello World</h2>
        <h2 ref={this.titleRef}>Hello World</h2>
        {/* 方式三, 回調(diào)函數(shù)會(huì)返回el, el就是我們要獲取的DOM了 */}
        <h2 ref={el => console.log(el)}>Hello World</h2>
        <button onClick={() => this.getDom()}>獲取DOM</button>
      </div>
    )
  }
}

ref獲取組件實(shí)例

ref 的值根據(jù)節(jié)點(diǎn)的類型而有所不同:

當(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è)類組件, 作為子組件測(cè)試
class Test extends PureComponent {
  test() {
    console.log("Test");
  }
  render() {
    return <h2>Test</h2>
  }
}

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 (
    <h2 ref={ref}>Foo</h2>
  )
})

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

到此這篇關(guān)于React獲取DOM和獲取組件實(shí)例的方式的文章就介紹到這了,更多相關(guān)React獲取DOM內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: