React项目中Antd组件库 Tab选项卡 defaultActiveKey 不生效解决方案

一、业务场景：
最近在做React项目时，需要进行跳转页面后，直接进入某个选项卡中（默认显示第一个） 为了大家后面遇到和我一样的问题，给大家分享一下

二、解决思路：
将页面跳转时传过来的值，在Tab组件中 赋给 defaultActiveKey 这个API，但是并没有生效，后来使用 activeKey才解决

三、问题原因：
defaultActiveKey 只能设置默认值
activeKey 当前激活 tab 面板的 key

四、解决方案：
将 defaultActiveKey 换成 activeKey 即可

五、具体实现步骤：

  const [showTabIdx, setshowTabIdx] = useState('1')
  const getQuery = ()=>{
  //从地址栏获取参数
    let tabIdx  = props.location.query.tabIdx
    console.log(tabIdx)
    setshowTabIdx(tabIdx)
  }
  
  //换成动态的这个事件必须加，不加其他选项卡会切换不了
const onTabChanged = (activeKey)=>{
  setshowTabIdx(activeKey)
}

  useEffect(() => {
  //进入页面就调用
    getQuery()
  }, []);


   <Tabs  activeKey={showTabIdx} onChange={onTabChanged}>
      <TabPane tab="关于我的" key="1">
        <AboutUs/>
      </TabPane>
      <TabPane tab="消息" key="2">
        <MessageUs/>
      </TabPane>
      <TabPane tab="积分" key="3">
        <Integral/>
      </TabPane>
      <TabPane tab="权益" key="4">
        权益
      </TabPane>
    </Tabs>

六、效果展示：

今天的分享到此结束，欢迎小伙伴们一起交流