javascript - @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