React中如何在上下文存储组件列表，无需顶层组件传参？

我想搞懂Headless UI、React Aria Components这类库是怎么做到让<Tab>嵌套在<TabList>、<TabPanel>嵌套在<TabPanels>里，而且不需要在导入这些组件的父组件里设置状态就能正常工作的。

我尝试自己做一个类似的<TabGroup>组件，期望的使用方式如下：

<TabGroup>
  <TabList>
    <TabButton>Tab 1</TabButton>
    <TabButton>Tab 2</TabButton>
    <TabButton>Tab 3</TabButton>
  </TabList>

  <TabPanels>
    <TabPanel>Panel 1 Content</TabPanel>
    <TabPanel>Panel 2 Content</TabPanel>
    <TabPanel>Panel 3 Content</TabPanel>
  </TabPanels>
</TabGroup>

我的要求是：不想把标签存成数组再映射，也不想通过props把它们传给<TabGroup>或其子组件，就像写普通HTML元素那样直接声明就行。

目前我已经在<TabGroup>里创建了上下文，并且设置了activeTab属性，点击<TabButton>时能更新这个属性，但遇到了两个关键问题：

• 不知道怎么根据activeTab的值（比如0、1）来确定要显示哪个面板；
• 不知道怎么在上下文中获取tabButtons和tabPanels的数组。

不只是Tab组件，之前开发自定义<Select>组件时也碰到过一模一样的问题。

我不想用第三方库的原因有三个：

• 没办法单独获取单个组件，必须下载整个库才能用1-2个组件；
• 存在样式和标记的自定义限制；
• 我更喜欢自己开发组件，这样能完全掌控代码😅，同时也想明确到底应该用这类库还是自己开发。

我曾试着把activeTab设为点击按钮的索引，但不知道怎么获取这个索引，希望能得到解决办法。

内容的提问来源于stack exchange，提问作者Yash Gorasia