徜徉在知识海洋的一群鲸鱼
Ref
Ref

Ref

ref和props不同的点在ref可以访问dom节点,并且不能作为属性传递,如果要传递需要forwardRef

ref主要用于管理焦点,文本选择或者媒体播放,出发强制动画,集成第三方dom库

一般用法

通过createRef声明this.ref

在A标签添加ref=this.ref

在didmount中获取this.ref,它本身是一个对象,有一个current属性,代表当前的dom元素

直接用document获取得到是字符串,

ref和props联动

给子组件的ref绑定一个props,这个props是一个方法,然后方法的参数其实就是子组件的dom

这样能在父组件出发子组件的dom然后进行其他操作

ref和高阶组件

函数中使用forwardRef可以传递ref

函数标签外部有一个ref,内部绑定一个标签有一个ref,通过forwardRef可以把内部的ref暴露给外部,通过外部的ref可以访问到内部的ref

在高阶组件中,A函数内部有一个B组件,现在需要把C组件经过A函数处理变成D组件

A函数中接收C组件的props,然后返回forwardRef,把C组件的props和ref都获取到,其中ref用一个属性secondref获取,之后把props和secondref都给B组件,然后在B组件的内部,处理props和secondref为B组件的ref