React中如何对Tabs组件进行激活tab？

Question

我在页面a中，有使用一个组件TabsWithBreadcrumbs：
它是一个Tabs继承自 https://ant-design.antgroup.com/components/tabs-cn

我们知道：
tabs有激活的页面，

...
  return (
    <div className={styles.myTabsWithBreadcumpsContainer}>
      <div className= {styles.myTabsWithBreadcumps}>
        <TabsWithBreadcrumbs data={tabs}></TabsWithBreadcrumbs>
      </div>
    </div>
  )

我想要在页面B实现页面A的TabsWithBreadcrumbs 的激活key，可以激活第一个也可以激活第二个，请问应该如何做呢？

Answer 1

通过全局状态库，或者自己设计顶层Context

Answer 2

tabs组件改成类似受控组件，传入activeKey

  const [activeKey, setActiveKey] = useGolablStore();


  const onChange = (newActiveKey: string) => {
    setActiveKey(newActiveKey);
  };

   <Tabs
      onChange={onChange}
      activeKey={activeKey}
    />

通过useGolablStore钩子，进行跨页面的状态通信，可以用redux、zustand 这些全局状态库