总结hook-间组件的传值

1.最近用函数组件来写react,所以总结下它们之间的关系,注意,我写的仅仅是针对自己的项目,若误导了,请见谅!
若想获得子组件或者兄弟之间的值。
1.首先在父组件引入useRef,通过useRef和子组件的ref进行连接----->指向dom节点,类似this,是一个容器。
在这里插入图片描述
useRef返回一个***可变的ref对象***,绑定在组件的ref属性中。
在这里插入图片描述
2.在子组件中,把ref对象赋值给ref属性。
在这里插入图片描述
3.在子组件的代码中,用forwardRef来创建组件。目的是该函数有两个变量,其中第二个变量ref接受,从第二步传来的ref,并将ref转发到对应的实例去。一般是一整个组件。
在这里插入图片描述
4.useImperativeHandle():
可以让你在使用ref时自定义暴露给父组件的实例值,函数的第二个参数,所返回的对象的内容挂载到父组件的ref.current上。
在这里插入图片描述
总结:
给子组件添加了ref属性之后,父组件结合useRef调用其.current便可获得该元素。

ref转发
1.useRef创建ref并赋值给ref变量(const ref = useRef()
2.给子组件指定ref为JSX属性值,将其向下传递给子组件,
3.传递ref给forwardRef内函数的第二个参数。
4.向下转发到ref到指定元素。
5.ref挂载,ref.current将指向上面说的元素。
注:ref只在使用react.forwardref定义组件时存在,常规函数和class不接受ref。

总结如图 所示:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值