taro中scrollIntoView的表现异常

背景

项目使用taro开发，需要转多端（小程序、h5、RN）。我们有个commonList列表组件，里面会对 taro的ScrollView组件进行封装，达到一些数据为空显示占位或者下拉加载等功能；
有个小伙伴需要用这个组件进行类似微信的聊天界面，

在输入消息多于一屏的时候自然而然需要滚动到最底部，使用户看到的一直是最新的消息。

问题

看到这种需求首先就翻了翻官网，在ScrollView的属性上看到了scrollIntoView属性；

没问题，用起来~我们每添加一条新增消息就给它一个新的Id并传入组件中。

   return <HKCommonList
      {...this.props}
      scrollIntoView={this.state.viewId}
    />

ok，看看效果。微信小程序和RN效果如下：

动图戳https://wos2.58cdn.com.cn/DeFazYxWvDti/frsupload/ade5e185a0fed12876b329d06941c52a.gif

没问题，通过~
但是到了H5就会发生消息错位的问题。。。。。

动图戳 https://wos2.58cdn.com.cn/DeFazYxWvDti/frsupload/a9579225c635d7d882be161e480b0ba3_22.gif

why？！？！？

分析

我们的commonList组件：

 <ScrollView
  style={{ width: '100%' }}
  {...this.props}
  scrollY
  scrollWithAnimation
  ...
>
  {this.props.data.map((v: { type: any }, i) => {
    return this.props.rowRenderer(v.type, this.props.data, i); //自定义渲染
  })}
</ScrollView>

并没有什么特别的。。。
整个排查过程不太好描述啊，翻了翻issue发现好多人都遇到过类似的问题，但是都不是很适用我们这种场景。
把commonList组件中的代码原封不动拿到我们的页面组件里运行表现也是正常的，实在想不明白咋回事。。。

解决

最后的最后，有个需求需要给ScrollView中的列表内容在加上一个id的容器包裹，修改之后是这样：

<ScrollView
  style={{ width: '100%' }}
  {...this.props}
  scrollY
  scrollWithAnimation
  ...
>
  <View id={this.props.containerId || 'hkcommonlist-container'}>
    {this.props.data·.map((v: { type: any }, i) => {
      return this.props.rowRenderer(v.type, this.props.data, i); //自定义渲染
    })}
  </View>
</ScrollView>

之后再次进行对话测试的回收就发现H5表现正常了！！！！
改完之后H5效果如下，RN和小程序表现也正常：

动图戳 https://wos2.58cdn.com.cn/DeFazYxWvDti/frsupload/03cd2079f01468f2df0e061ff24aad2a.gif

---

总结下：尽量不要做一些复杂组件的封装了！！！！能用taro官网上的就用不要总是拿来嵌套啥的，感觉taro内部实现不是很稳定，坑还是有的