react进阶之refs转发（ts 版本）_react.forwardref ts

ref 的基本使用方法我们在上一篇博客中讲了，但是在上一篇中还遗留了一个问题，就是函数组件，如果我想使用ref,这个怎么操作？在问一个问题，我们在函数组件中通过ref想获取啥？—— dom、react 对象？带着这些问题来阅读下面的文章

refs 在函数组件的作用

我们知道，函数组件是没有状态的。因此，我们想想获取函数组件，不能是在类组件中那么使用，那么，如果我们想获取函数组件内部的dom 或者react 元素呢？ 此时，我们就需要使用ref转发了.

使用方法

ref转发 最关键的是在于转发， 必须需要使用 React.forwardRef() 这个内置的高阶组件，这个高阶组件返回一个新的组件，在调用原组件的时候，需要通过高阶组件包裹的新组件来实现

函数组件使用ref 转发

案例：

import React, { Component } from 'react'

interface IAP {
  msg: string,
}
// 在使用ref 转发的时候，会默认传递两个参数，第一个是函数组件原有的props,第二个参数是ref
// 如果使用ts 需要注意，第二个参数的的类型。要于下面需要使用ref的类型一致，如下，我们是在h1 元素中使用，那么类型就是 HTMLHeadingElement 
function A (props: IAP, ref: React.Ref<HTMLHeadingElement >){
// 这里拿到的ref 是一个空值，为啥呢？ ref 都还没有完成绑定，但是在控制台中没有展开前是null， 展开对象会触发getter 方法，是会有值的。
 console.log(ref);
  return (
    <h1 ref={ref}>{props.msg}</h1>
  )
}

const NewA = React.forwardRef(A);

export default class TestForwardRef extends Component {
// 我们在接收使用的ref,定义也要是相同的类型。但是这里ts 好像不强制要求。我们自己可以人为来规定，避免类型不匹配
  private getRef  = React.createRef<HTMLHeadingElement>();
// 组件完成挂载就打印当前的结果
  componentDidMount() {
  // 这里打印的是获取到的真实的ref 的值
    console.log(this.getRef);
    
  }
  
  render() {
    return (
      <div>
      // 需要使用包装过后的组件，传递的参数是和原有组件一致的。
       <NewA msg="我是组件A" ref={this.getRef}></NewA>
      </div>
    )
  }
}

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

结果：

类组件使用ref 转发

函数组件是在第二个参数中获取ref，那么类组件中怎么获取呢？ 因为类组件是没有和函数组件那样传参的。我们仔细想一想，在类组件中我们是可以直接使用ref的，所以对于属性来讲，在转发的时候就不能使用ref 这个原来的属性名了。这里需要注意React.forwardRef里面可以传递一个函数，函数的参数如下：

案列：

import React, { Component } from 'react'
interface IAP {
  // 其他参数
  msg: string,
  // ref转发获取A组件的想要的dom
  forwardRef: React.Ref<HTMLHeadingElement>
}
// 我们知道类组件中，传递参数是从 props 里面来进行传参的，所以这里就通过属性来传递
class A extends Component<IAP> {
  render() {
    console.log(this.props,'------');
    
    return (
      <h1 ref={this.props.forwardRef}>{this.props.msg}</h1>
    )
  }
}
// 定义转发的参数类型
interface IForwardProp {
   // 其他参数
   msg: string,
}
//   React.forwardRef 里面填写一个函数，函数有两个参数，第一个是默认类组件的props, 第二个参数的ref 转发的对象，这里需要注意 ref 的类型
const NewA = React.forwardRef((props:IForwardProp , ref: React.Ref<HTMLHeadingElement>) => {
  return (<A {...props} forwardRef={ref} />)
})

export default class TestClassForwardRef extends Component {
  // 绑定需要使用的地方，注意类型需要一致
  private getRef = React.createRef<HTMLHeadingElement>();

  componentDidMount() {
    console.log(this.getRef);
  }
  
  render() {
    return (
      <div>
        // 使用方法
        <NewA msg='我是A类组件' ref={this.getRef}></NewA>
      </div>
    )
  }
}

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
38
39
40
41
42
43
44
45

效果