Question

我正在尝试使用Material UI标签进行导航。但是，我的应用程序中的路由不匹配任何选项卡。当我将值传递给与任何子选项卡值不匹配的选项卡组件时，我收到有关无效值的警告。

我创建了一个隐藏的选项卡，将null值作为解决方法。

是否可以禁用有关无效选项卡值的此警告？
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的{{1}}属性设置为 false 不会显示任何警告，并且会正确取消选择所有选项卡。

Philip的解决方案效果很好，这里我只是不需要开关盒。

在我的情况下，我只有一个选项卡（登录），我不想选择任何选项卡，因为它是按钮而不是选项卡。

这是我要解决的问题：

Tabs

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

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

与飞利浦的答案类似，密钥位于<Button onClick={(event, newValue) => { this.setState({content: "login"}) }}>Login</Button >中，可以防止{this.state.content !== "login" ? this.state.content : false}用“登录”值呈现。相反，它被赋予值为“ false”，这是允许的，并且不会调用警告。

Answer 3

我不久前也遇到过这个问题，并遵循相同的模式。例如，

return <Tabbar value={value ?? false} onChange={(event: React.ChangeEvent<{}>, value: any) => onChange(value)}>{tabs}</Tabbar>

材料UI选项卡没有选定的选项卡

3 个答案: