组件中生成多个子组件,遍历多个ref

本文介绍了在React应用中,如何在父组件中遍历生成多个子组件,并通过`useImperativeHandle`实现调用子组件方法。父组件通过`useRef`创建引用数组,将子组件的方法绑定到对应的索引,然后通过引用调用子组件的`onChangeAll`方法。这种方法为复杂组件间的通信提供了一种解决方案。
摘要由CSDN通过智能技术生成

当业务场景中出现父组件中,遍历生成多个子组件,又需要调用子组件的方法。则按以下方式进行编码。

//子组件不能用ref属性绑定,无法生效,得用新命名的ref,例如:onRef

父组件:


//父组件关键代码

const child = useRef<any>([]);


<ChildCom onRef={f => { child.current[index] = f; }}/>

//调用子组件的方法
child.current[index].onChangeAll(value);

子组件

  useImperativeHandle(onRef, () => (
    {
      onChangeAll: async value => { console.log(value)},
    }));

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值