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

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

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

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>
    )
  }
}

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

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