Reactでコンポーネントが何番目か取得する方法

概要

タブを実装するときに、上から識別子となる文字列を渡さずに、自分（Tab）が何番目の要素であるか取得したかったので、調べてみました。

<Tabs>
  {/* Tabに余計な物は何も渡したくない */}
  <Tab>aa</Tab>
  <Tab>bb</Tab>
  <Tab>cc</Tab>
</Tabs>

Childrenを分解する

結論から書くと、Tabsでchildrenを分解して、親からContextを通じて渡せば良いようです。

const Tabs:FC<TabsProps> = ({children}) => {
  ...

  return children.map((child, index) => (
    <TabsProvider value={{..., tabIndex: index}}>
      child
    </TabsProvider>
  );
};

TabからはuseContextで値を取得することができます。