@tarojs/taro版本3.3.16,引用VirtualList 实现虚拟列表报错及解决

1.问题描述

@tarojs/taro版本3.3.16,引用VirtualList 实现虚拟列表报错。我demo上已经实现该功能,移植到现有项目后页面报错。该demo用的3.x的taroUI+ 16版本的react
@tarojs/taro版本3.3.16,引用VirtualList 实现虚拟列表报错及解决_第1张图片
demo和公司项目用的同样的代码片段,参照taro官网写的
@tarojs/taro版本3.3.16,引用VirtualList 实现虚拟列表报错及解决_第2张图片

2.解决问题

看了下demo上@tarojs/taro版本为3.6.8,和公司项目的3.3.16版本确实不一致,我们先翻译下该错误,告知找不到children。我们从引用的VirtualList路径去找对应的源码,可以看到下图中图二图三中对于子组件的属性名确实有差异。找到问题了,那么改起来就简单了,
只需把公司项目里的【item={Row} 】改为【children={Row}】
@tarojs/taro版本3.3.16,引用VirtualList 实现虚拟列表报错及解决_第3张图片
@tarojs/taro版本3.3.16,引用VirtualList 实现虚拟列表报错及解决_第4张图片
@tarojs/taro版本3.3.16,引用VirtualList 实现虚拟列表报错及解决_第5张图片

3.回归问题

其实这类问题挺常见的,依赖库的版本不一致,出现的奇奇怪怪的问题。我们也可以让两个项目的版本保持一致,比如修改demo上taro版本 排查和修复问题后再移植到公司项目。taroui官方文档中3.x的VirtualList文档用的就是item,小版本应该是有那部分模块和属性名、方法等有略微差异。实际开发过程中还是要自己甄别 多踩坑就好了。

未来总是充满希望! 加油。

你可能感兴趣的:(taro,reactjs,npm)