React.js Material-UI：以编程方式隐藏和显示选项卡

Posted 2023-02-19

【中文标题】React.js Material-UI：以编程方式隐藏和显示选项卡

【英文标题】：React.js Material-UI: Programmatically hide and show tab

【发布时间】：2021-08-06 20:04:16

【问题描述】：

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

在下面提供我的代码 sn-p 和沙箱

有人可以帮忙吗？

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>
  );

【参考方案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>

Working DEMO

【讨论】：

谢谢 Shubham Khatri，非常感谢！

Shubham Khatri，我已经调整了演示，向 tab2 添加了一个组件，我想知道您是否知道如何在组件中隐藏选项卡？ codesandbox.io/s/material-demo-8je9d