如何在没有选定选项卡的情况下使用“TabList”？

【问题标题】：How do I use `TabList` with no selected tab?如何在没有选定选项卡的情况下使用“TabList”？
【发布时间】：2022-08-18 01:16:13
【问题描述】：

我正在使用TabList (@mui/lab/TabList) 并希望列表呈现（最初）没有选择的任何选项卡。我如何实现这一目标？使用（非实验性）Tabs 组件，我可以使用value 属性和false 作为值来做到这一点，但TabList 似乎没有继承这个属性（ref）。相反，当前值取自 TabContext，但它的类型仅允许 string 和不是false (ref)。

标签： material-ui tabs

【解决方案1】：

使用实验性 TabList 时，您可以在 TabList 上方的 TabContext 级别上设置值。您需要有一个状态变量来保存该值，并且您可以使用您想要的任何值对其进行初始化，如下所示：

const [ tab, setTab ] = useState("1");

return <Box  sx={{textAlign: 'center'}}>
        <Box> Project <b>{project.name}</b></Box>
        <TabContext value={tab}>
            <TabList>
                <Tab label="Selected Tab" value="1" />
            </TabList>
            <TabPanel value="1">
            </TabPanel>
        </TabContext>

如果您将该值设置为 false（或列表中不存在的任何其他值），则不会选择任何选项卡

【讨论】：