如何使我的自定义选项卡组件能够将索引传递给子项并隐藏窗格？

Question

我正在尝试创建一个自定义 Tabs 组件，以便我可以了解更多反应，但是我被卡住了。

共有三个组件，灵感来自 Material-UI 选项卡。Tabs、Tab 和 TabPane。

标签页.js

const Tabs = (props) => {

    const { children, defaultTab } = props;

    const [activeTab, setActiveTab] = useState(defaultTab);

    const onTabClick = (clickedTab = 0) => {

        setActiveTab(clickedTab);

    }

    return (

        <div className="tabs">

            {children}

        </div>

    )

}

这应该保持 activeTab 状态并能够告诉 Tab 和 TabPane 活动选项卡（或者应该吗？）。

Tab.js

const Tab = (props) => {

    const { label } = props;

    return (

        <li className="tabs-tab" onClick={  }> {label} </li>

    )

}

export default Tab;

Tab 组件有onClick一个标签。但是，我不知道如何通过函数onTabClick从Tabs该组件通过孩子。

TabPane.js

const TabPane = (props) => {

    const { children } = props;

    return (

        <div className="tabs-tab-pane">

            {children}

        </div>

    )

}

export default TabPane;

这是每个选项卡内容的容器。我不确定如何从这里获取 Tabs 中的数据，所以我知道何时隐藏窗格。

这是一个代码共享：

这是查看此代码和预览的网址：https : //codesandbox.io/s/objective-mendel-752qe?fontsize=14

我如何获得这个功能？