上一章讲了ref获取原声DOM3种方式，最常用的是第二种，createRef

本章讲ref获取组件

ref获取类组件

使用方式和createRef获取原生DOM一样，只不过获取到组件后，可以调用组件实例的方法

import React, { PureComponent, createRef } from 'react'
class HelloWorld extends PureComponent {
  test () {
    console.log('test----')
  }
  render () {
    return (
      <div>
        <h2>Hello World 组件</h2>
      </div>
    )
  }
}

export class App extends PureComponent {
  constructor() {
    super()
    this.titleRef = createRef()
  }
  getComponent () {
    console.log(this.titleRef.current.test())
  }
  render () {
    return (
      <div>
        <HelloWorld ref={this.titleRef} />
        <button onClick={() => this.getComponent()}>获取元素</button>
      </div>
    )
  }
}

export default App

ref获取函数组件

错误做法

由于函数组件没有组件实例，不是继承来的，因此不能使用createRef,，如下使用会报错：

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

function Hello () {
  return (
    <div>
      <h2>Hello World 函数组件</h2>
    </div>
  )
}
export class App extends PureComponent {
  constructor() {
    super()
    this.titleRef = createRef()
  }

  getComponent () {
    console.log(this.titleRef.current.test())
  }
  render () {
    return (
      <div>
        <Hello ref={this.titleRef} />
        <button onClick={() => this.getComponent()}>获取元素</button>
      </div>
    )
  }
}

export default App

正确做法：高阶函数forwardRef

首先明确一点，函数组件一般只用来返回UI，做UI展示，所以获取函数组件，一般会获取函数组件返回的UI中某一些

forwardRef使用方式：

1. 引入forwardRef
2. 函数组件用forwardRef包裹一个无名函数，赋值给一个变量，该变量就是组件名。该无名参数接受两个参数props,ref
3. 函数组件返回的UI元素中，增加ref={ref}
4. 父组件引用函数组件的时候，增加ref={createRef()}

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

const Hello = forwardRef(
  function (props, ref) {
    return (
      <div>
        <h2 ref={ref}>Hello World 函数组件</h2>
      </div>
    )
  }
)
export class App extends PureComponent {
  constructor() {
    super()
    this.titleRef = createRef()
  }

  getComponent () {
    console.log(this.titleRef.current)
  }
  render () {
    return (
      <div>
        <Hello ref={this.titleRef} />
        <button onClick={() => this.getComponent()}>获取元素</button>
      </div>
    )
  }
}

export default App