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