@reach/tabs - 如何在 MDX 页面上一次切换所有选项卡（React + Gatsby + MDX）

Question

我正在尝试为 Gatsby 网站创建一个 Tab 组件。如果我有一个包含多个标签相同标签的页面：

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

我想要的是，当我切换到“标签 2”时，页面上的所有标签都应该切换到“标签 2”。

要实现这一点：

1. 我创建了一个“CoLocatedTabs”组件（具有受控行为） 代码：https://github.com/gaurav-nelson/gatsby-gitbook-starter/blob/master/src/components/tabsTest.js
2. 将其导入 MDX（两次） 代码：https://raw.githubusercontent.com/gaurav-nelson/gatsby-gitbook-starter/master/content/introduction.mdx
3. 在呈现的版本中，我得到了两个不相互通信的单独选项卡组件。

我知道这两个组件是不同的，并且有自己的索引。有没有办法在 MDX 中全局处理页面上所有选项卡组件的索引？

或者有什么解决方法可以达到这个结果？

Answer 1

感谢https://github.com/alexkrolick/ 创建MDX observable。

在https://codesandbox.io/embed/gatsby-mdx-tabs-linked-state-demo-rkb8v查看演示