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

Question

我正在尝试创建一个自定义 Tabs 组件，以便我可以了解更多反应，但是我被卡住了。共有三个组件，灵感来自 Material-UI 选项卡。Tabs、Tab 和 TabPane。标签页.jsconst 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.jsconst Tab = (props) => {    const { label } = props;    return (        <li className="tabs-tab" onClick={  }> {label} </li>    )}export default Tab;Tab 组件有onClick一个标签。但是，我不知道如何通过函数onTabClick从Tabs该组件通过孩子。TabPane.jsconst 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我如何获得这个功能？