材质UI选项卡没有选择的选项卡

Question

我正在尝试使用“材质UI”选项卡进行导航。但是，我的应用程序中有一些路由与所有选项卡都不匹配。当我将一个值与任何子选项卡值都不匹配的值传递给Tabs组件时，会收到有关无效值的警告。

我创建了一个隐藏选项卡，将值为null来解决。

1. 是否可以禁用有关选项卡值无效的警告？
2. Material UI中的选项卡可以不选择吗？

谢谢

Answer 1

当前选择的选项卡的值。如果您不希望选择任何选项卡，则可以将此属性设置为false。

来自：https : //material-ui.com/api/tabs/

我最后要做的是创建带有有效制表符值的switch语句，并且如果windows.location.pathname不匹配，则默认返回false。

路线示例：

class Routes extends Component {
  render() {
    return (
      <Switch>
        <Route path={'/test2'} component={Test2} />
        <Route path={'/test3'} component={Test3} />
        <Route exact path={'/'} component={Test} />
      </Switch>
    );
  }
}

NavBar示例：

checkPathnameValue() {
  const { pathname } = window.location;
  switch (pathname) {
    case '/test2':
    case '/test3':
    break;
  default:
    return false;
  }
  return pathname;
}

render() {
  const { classes } = this.props;
  const tabValue = this.checkPathnameValue();
  return (
    <div className={classes.root}>
      <AppBar position={'static'}>
        <Toolbar>
          <Tabs value={tabValue}>
            <Tab
              label={'Test 2'}
              value={'/test2'}
              to={'/test2'}
              component={Link}
            />
            <Tab
              label={'Test 3'}
              value={'/test3'}
              to={'/test3'}
              component={Link}
            />
          </Tabs>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Answer 2

似乎将 的value属性设置Tabs为false不会显示任何警告，并且会正确取消选择所有选项卡。

菲利普的解决方案完美无缺，在这里我只是取消了对开关盒的需求。

就我而言，我只有一个选项卡（登录），我不想在其中选择选项卡，因为它是一个按钮而不是选项卡。

这是我为解决此问题所做的工作：

<Tabs value={this.state.content !== "login" ? this.state.content : false} onChange={(event, newValue) => { this.setState({content: newValue}) }}>
  <Tab value="home" label="Home" wrapped />
  <Tab value="tab1" label="Tab 1" />
  <Tab value="tab2" label="Tab 2" />
</Tabs>

在我的 AppBar 的另一部分，我有一个登录按钮：

<Button onClick={(event, newValue) => { this.setState({content: "login"}) }}>Login</Button >

与飞利浦的回答类似，关键在于{this.state.content !== "login" ? this.state.content : false}防止Tabs使用“登录”值呈现。相反，它被赋予值“false”，这是允许的并且不会调用警告。