React-ref的使用

775 阅读1分钟

在react里面ref一般用来获取组件的实例或者DOM元素的实例,通常的用法是在父组件获取到子组件的实例,或者子组件内部某个dom元素的实例,现在针对这一需求进行探索:

这里子组件有两种方式创建,第一种是class组件,它返回的组件实例,第二种是函数组件,返回的是dom元素,当子组件是class组件时,想要获取子组件实例时,只需要创建ref并赋值给子组件,代码如下:

这里myRef的创建:当父组件为class组件使用React.createRef(),为函数组件时用useRef()

debug到myref的值:

当想要获取子组件内部某个元素的实例,则需要使用React.forwardRef,向下传递ref到具体dom上去,当class组件使用redux,用connect包裹时,需要配置forwardRef配置:

这样就能获取到当前子组件上div的实例。

当子组件为函数组件,因为函数组件没有实例返回,所以不能在函数组件上获取ref,这时也需要使用React.forwardRef,配合useImperativeHandle方法,将子组件上想要暴露的实例方法暴露给父组件,useImperativeHandle内部也可以返回具体的dom元素实例:

React.forwardRef还可以转发HOC内部的被包裹的实际组件的ref实例。