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

偏执的太偏执、 2023-10-02 20:53 5阅读 0赞

#### 文章目录 ####

*   *  React获取DOM的方式
     *   *  ref获取DOM元素
         *  ref获取组件实例

### 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