React.js Material-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组件提供任何 value 属性，MaterialUI 会将其默认为呈现项的索引。 由于只呈现了两个 Tab 元素，handleChange function 将 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>

工作演示