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> ) } }
结果：
类组件使用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> ) } }
效果
