React.js材质UI:以编程方式隐藏和显示选项卡

Question

我正试图以编程方式显示和隐藏第二个选项卡，但当我点击第三个选项卡时，我看到了第二个标签的内容。

在下面提供我的代码片段和沙箱

有人能帮忙吗？

https://codesandbox.io/s/material-demo-8je9d

export default function SimpleTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const [Tab2Visible] = useState(false);
useEffect((newValue) => {
// const { user } = props;
console.log("useEffect newValue--->", newValue);
}, []);
const handleChange = (event, newValue) => {
console.log("newValue--->", newValue);
setValue(newValue);
};
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs
value={value}
onChange={handleChange}
aria-label="simple tabs example"
>
<Tab label="Item One" {...a11yProps(0)} />
{Tab2Visible === false ? (
""
) : (
<Tab label="Item Two" {...a11yProps(1)} />
)}
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
Item One
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>
</div>
);
}

Answer 1

如果不为Tab组件提供任何值属性，MaterialUI将默认为渲染项的索引。由于只呈现两个Tab元素，handleChange函数为Tab项3提供值1。

添加显式值属性将按照您希望的方式工作到

<Tabs
value={value}
onChange={handleChange}
aria-label="simple tabs example"
>
<Tab label="Item One" value={0} {...a11yProps(0)} />
{Tab2Visible === false ? (
""
) : (
<Tab label="Item Two" value={1} {...a11yProps(1)} />
)}
<Tab label="Item Three" value={2} {...a11yProps(2)} />
</Tabs>

工作演示