07-组件化高级-ref获取组件

41 阅读1分钟

上一章讲了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

image.png

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

image.png

正确做法:高阶函数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