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

Posted on by

React獲取DOM的方式

ref獲取DOM元素

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

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

觸發強制動畫;

集成第三方 DOM 庫;

我們可以通過refs獲取DOM;

如何創建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() 方式提前創建出來一個對象, 將創建出來的對象綁定到要獲取的元素上;

使用時獲取到創建的對象其中有一個current屬性就是對應的元素;

import React, { PureComponent, createRef } from 'react'

export class App extends PureComponent {
  constructor() {
    super()

    // 提前創建一個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 的值根據節點的類型而有所不同:

當 ref 屬性用於 HTML 元素時，構造函數中使用 React.createRef() 創建的 ref 接收底層 DOM 元素作為其 current 屬性;

當 ref 屬性用於自定義 class 組件時，ref 對象接收組件的掛載實例作為其 current 屬性;

你不能在函數組件上使用 ref 屬性，因為他們沒有實例;

這裡我們演示一下ref獲取一個class組件對象的實例:

import React, { PureComponent, createRef } from 'react'

// 創建一個類組件, 作為子組件測試
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'
}

// 創建一個函數組件, 作為子組件測試
// 使用forwardRef將函數包裹起來
const Foo = forwardRef(function(props, ref) {
  return (
    <h2 ref={ref}>Foo</h2>
  )
})

export class App extends PureComponent {
  constructor() {
    super()

    // 提前創建一個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內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：