美文网首页
[2022-07-08]记录一次taro2的父组件调用子组件的问

[2022-07-08]记录一次taro2的父组件调用子组件的问

作者: kangaroo_v | 来源:发表于2022-07-08 09:54 被阅读0次

    如题.. 最近要把一个项目的首页改成公司小程序原生化.
    小程序使用taro2框架来搭建的. 需要一些学习成本
    再重构的过程 页面用hooks 编写
    很正常的遇到了父组件调用子组件方法的问题
    随后又很正常的按照react hooks的方法引入了forwarRef包装子组件 useImperativeHandle 暴露ref指向 传递给父组件调用的方法..
    然后... 编译报错了 如图

    没想到吧 老铁.png

    这个错误和导出组件的名称错误一致. 一开始怀疑是包装错误. 随后更换了几种姿势. 编译器依旧不认可.. 随后进入了漫长的debugger...
    再一次尝试中发现

    import Taro,{forwardRef} from '@tarojs/taro';
    const child = (props)=>{
      console.log('forwardRef',forwardRef)
    }
    
    // forwardRef undefined
    

    居然导出的函数是undefind???
    node_modules 看源码 发现确实没有这个api 这下尴尬了..
    经过几个小时的折腾.. 终于找出了正确的姿势

    ps: 自己研究出来的 不一定是正确的方式

    //父组件
    import Taro, { useRef } from '@tarojs/taro';
    const Dom = useRef(null); // 产品子组件
    // ...某个函数调用
    Dom.current.onTest()
    
    ...
    <HotProduct oRef={Dom} /> // 这里用ref不行 只能用自定义属性
    
    
    // 子组件
    import Taro, { useImperativeHandle } from '@tarojs/taro';
    const child = ({oRef})  => { // 结构props取值
      useImperativeHandle(oRef,() => ({
        onTest:()=>{
          console.log('子组件调用了哦');
        }
      }));
    }
    

    这样就可以正常调用了... 希望其他遇到此问题的同学可以避坑
    taro官网 好像taro3是支持了forwarRef.
    taro2还不支持.. 项目还不太好升级 哎..

    相关文章

      网友评论

          本文标题:[2022-07-08]记录一次taro2的父组件调用子组件的问

          本文链接:https://www.haomeiwen.com/subject/hrnmbrtx.html