关于ant mobile自带的一个小bug

最近在开发移动端应用时，使用了react+ant mobile方式，自然是为了使用某些组件加快开发效率，但是在开发过程中却遇到了一些小问题，明明按照文档去写的，但实际效果并没有达到预期。下面就简单说下关于ant mobile的Tabs组件的一个自身的小bug.

首先看下我们的页面结构，很简单就是一个tab切换页，展示不同的数据列表

正常情况进入页面左侧tab选中状态，然后切换触发对应的切换和点击事件；当然还有些情况是要求进入到页面是右侧tab为选中状态，我们可以通过路由传参或者本地存储方式进行参数控制，方法大家都清楚，就不在赘述。本次开发也涉及到了后面这种情况，采用的是cookie缓存方式进行存储。

基于上述背景，我们去查看相关api，发现有一个 initialPag 属性，可以控制初始化tab，类型为数值/字符串均可以。

看下简单的代码：

const offTabs = [{ title: "充值订单", sub: '0' }, { title: "余额消费", sub: '1' }];
render() {
    let { curTab } = this.state;
    return curTab || curTab == '0' ? (
      <div className={styles.offLineWrap}>
        <Tabs
          tabs={offTabs}
          initialPage={curTab}
          renderTab={tab => <span>{tab.title}</span>}
          onTabClick={(item, idx) => {
            this.changeTabs(item, idx);
          }}
          onChange={(item, idx) => {
            this.changeTabs(item, idx);
          }}
        >
        </Tabs>
      </div>) : null
}
/*其余代码省略*/

此时我们把 initialPage 设置为默认选中的 curTab，类型为字符串。

如果我们通过cookie去控制初始化tab为右侧选中，即curTab = '1'，通过控制台可以看到，tab实际已经切换到了右侧，请求了右侧的数据接口，但是反观页面效果，tab被选中的依旧是左侧tab。

起初考虑的是数据变化页面没有进行更新导致的，于是加了 curTab 是否存在的三目运算写法，但是问题依旧没有解决。没办法，复查文档和代码，发现没有任何问题，但是tab选中状态就是错的。

最终，抱着试试看的心里，把原来的 curTab 字符串类型改成了数值类型，突然问题就解决了，tab能够完美初始化选中了！！！

综上，我们可以看出关于tabs初始化initialPage属性，虽然文档里写了值的类型可以为数值或字符串，但是在某些情况下（此处特指初始化时特定tab选中情况）字符串类型是不生效的，只能使用数值类型。这个可能是组件的一个小bug吧，虽然不会造成很大的问题，但是面对这种问题，找到问题原因还是需要一定时间的。

仅此记录一下这个小问题，希望能帮助同样掉到坑里的小伙伴~