React获取DOM和获取组件实例的方式

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) // 
Hello World
  }
  
  render() {
    return (
      <div>
        <h2 ref="hello">Hello World</h2>
        <button onClick={() => this.getDom()}>获取DOM</button>
      </div>
    )
  }
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

方式二:传入一个对象(常用的方式, 推荐)

在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) // 
Hello World
  }
  
  render() {
    return (
      <div>
        <h2 ref={this.titleRef}>Hello World</h2>
        <button onClick={() => this.getDom()}>获取DOM</button>
      </div>
    )
  }
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

方式三:传入一个函数(了解)

该函数会在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>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

---

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

函数式组件是没有实例的，所以无法通过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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37