首页 > 其他 > 详细

react ref useRef、createRef和forwardRef

时间:2021-07-01 14:36:31      阅读:49      评论:0      收藏:0      [点我收藏+]

之前同事问了一个问题,我父组件如何嗲用子组件里面的方法,当时第一想到的就是callback,因为这个也是项目中常用的一种方式。尤其是现在使用hooks,callback的方式比之前类组件的方式要友好了很多。但是紧接着来了一句还有其他的方式么。顿时就蒙蔽了。这时候只想到了之前学vue的时候使用过的一种方式bus.$emit的方式进行对外暴露当前组件中的函数等信息。还有就是ref。但是我再使用react的当中基本没用ref所以就没提这个方案。但是同事问如果用ref解决的话要怎么搞。我后面想了想没有给出具体答案。然后去查找了一下资料。

ref:

1,在类组件中是可以直接使用的,如果ref的对象是个子组件,那么会获取到改子组件的事例,这样就可以直接调用子组件的一些函数。

2,如果ref对象是原生html元素,那么就是直接当成id使用,只用获取到改原生元素的dom节点

3,是不能直接在函数式组件中使用的,因为函数式组件是没有实例的

如果我非要在函数式组价中使用的话,那么需要使用useRef钩子来创建ref对象

useRef:

const FocusInput11 = (props) =>{
const refContainer = useRef();

React.useEffect(() => {
refContainer.current.focus();
});
return <input type="text" ref={refContainer} />;
}
 
 
这个只是在组件内使用,但是如果我要是给子组件是函数式组件传递ref的时候那么就会有问题,这个时候就需要使用forwardRef来进行ref分发,
forwardRef:
const FocusInput = forwardRef((props, ref) => <input type="text" ref={ref} />);
<FocusInput ref={this.ref} />
这样的话,就可以通过ref调用函数式子组件当中的方法了。
 
 
参考链接 https://juejin.cn/post/6844903982725349390
 

react ref useRef、createRef和forwardRef

原文:https://www.cnblogs.com/danhua/p/14958183.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!