快捷導(dǎo)航

詳解React獲取DOM和獲取組件實例的方式

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

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

React獲取DOM的方式

ref獲取DOM元素

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

管理焦點，文本選擇或媒體播放;

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

集成第三方 DOM 庫;

我們可以通過refs獲取DOM;

如何創(chuàng)建refs來獲取對應(yīng)的DOM呢?目前有三種方式:

方式一:傳入字符串(這種做法已經(jīng)不推薦)

在React元素上綁定一個ref字符串, 使用時通過 this.refs.傳入的字符串格式獲取對應(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

方式二:傳入一個對象(常用的方式, 推薦)

在react中導(dǎo)入createRef, 通過createRef() 方式提前創(chuàng)建出來一個對象, 將創(chuàng)建出來的對象綁定到要獲取的元素上;

使用時獲取到創(chuàng)建的對象其中有一個current屬性就是對應(yīng)的元素;

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

方式三:傳入一個函數(shù)(了解)

該函數(shù)會在DOM被掛載時進(jìn)行回調(diào)，這個函數(shù)回調(diào)時會傳入一個元素對象，我們可以自己保存;

使用時，直接拿到之前保存的元素對象即可;

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ù)會返回el, el就是我們要獲取的DOM了 */}
        <h2 ref={el => console.log(el)}>Hello World</h2>
        <button onClick={() => this.getDom()}>獲取DOM</button>
      </div>
    )
  }
}

ref獲取組件實例

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

當(dāng) ref 屬性用于 HTML 元素時，構(gòu)造函數(shù)中使用 React.createRef() 創(chuàng)建的 ref 接收底層 DOM 元素作為其 current 屬性;

當(dāng) ref 屬性用于自定義 class 組件時，ref 對象接收組件的掛載實例作為其 current 屬性;

你不能在函數(shù)組件上使用 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)
    // 可以調(diào)用組件的實例方法
    this.tsetRef.current.test()
  }
  
  render() {
    return (
      <div>
        <Test ref={this.tsetRef}/>
      </div>
    )
  }
}

export default App

函數(shù)式組件是沒有實例的，所以無法通過ref獲取他們的實例:

但是某些時候，我們可能想要獲取函數(shù)式組件中的某個DOM元素;

這個時候我們可以通過 React.forwardRef 來綁定函數(shù)組件中的某個元素, forwardRef中接收兩個參數(shù), 參數(shù)一: props, 參數(shù)二: ref，后面我們也會學(xué)習(xí) hooks 中如何使用ref;

import { render } from '@testing-library/react';
import React, { PureComponent, createRef, forwardRef  } from 'react'
}

// 創(chuàng)建一個函數(shù)組件, 作為子組件測試
// 使用forwardRef將函數(shù)包裹起來
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() {

    // 獲取函數(shù)組件中元素的DOM
    console.log(this.fooRef.current)
  }
  
  render() {
    return (
      <div>
        <Foo ref={this.fooRef}/>
      </div>
    )
  }
}

export default App

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

您可能感興趣的文章: