@ress/tabs-如何在MDX页面上一次切换所有选项卡(React Gatsby MDX)

Question

我正在尝试为盖茨比站点创建一个选项卡组件。如果我有一个带有多个标签的页面：

Heading 1
First tab block
Tab 1 | Tab 2
Content Tab 1
Second tab block
Tab 1 | Tab 2
Content Tab 1 for the second block
Third tab block
Tab 1 | Tab 2
Content Tab 1 for the third block

我想要的是，当我切换到" TAB 2"时，所有页面上的所有标签都应切换到" Tab 2"。

实现这一目标：

1. 我创建了一个" colocatedTabs"组件(具有控制行为(代码：https：//github.com/gaurav-nelson/gatsby-gitbook-starter/blob/master/src/src/components/tabstest.js
2. 将其导入MDX(两次(代码：https：//raw.githubusercontent.com/gaurav-nelson/gatsby-gitbook-starter/master/content/content/introduction.mdx
3. 在渲染版本中，我获得了两个单独的选项卡组件，这些选项均不相互交谈。

我知道两个组件都不同并且有自己的索引。有什么方法可以在MDX中的页面上全球处理所有选项卡组件的索引？

或任何解决结果的方法？

Answer 1

感谢https://github.com/alexkrolick/创建MDX可观察。

请参阅https://codesandbox.io/embed/gatsby-mdx-tabs-links-nink--nink-state-demo-rkb8v