如题.. 最近要把一个项目的首页改成公司小程序原生化.
小程序使用taro2
框架来搭建的. 需要一些学习成本
再重构的过程 页面用hooks
编写
很正常的遇到了父组件调用子组件方法的问题
随后又很正常的按照react hooks
的方法引入了forwarRef
包装子组件 useImperativeHandle
暴露ref
指向 传递给父组件调用的方法..
然后... 编译报错了 如图
这个错误和导出组件的名称错误一致. 一开始怀疑是包装错误. 随后更换了几种姿势. 编译器依旧不认可.. 随后进入了漫长的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
还不支持.. 项目还不太好升级 哎..
网友评论