Tabs key 的正确使用

1. 问题描述

最近遇到一个问题，右侧有个改变 tab list 的按钮，不过在交换当前 tab 时，会出现激活标签页与底部的 tab line 不同步的情况

2. 解决方案

在改变当前 tab list 的时候，改变当前 Tabs 的唯一 key 值，具体代码如下：

class Application extends Component {
  state = {
    tabUniqueKey: '',
    tabKeyList: []
  }
  
  changeTabHeaders = (newAttrCodes) => {
    this.setState({
      tabKeyList: newAttrCodes,
      tabUniqueKey: new Date().getTime().toString()
    })
  }
  
  render() {
    const { tabUniqueKey, tabKeyList } = this.state
    return (
      <Tabs key={tabUniqueKey}>
        { tabKeyList.map(tabItem => {
          return (
            <Tabs.TabPane key={tabItem} tab={tabItem}>
          )
        }) }
      </Tabs>
    )
  }
}