Вкладки пользовательского интерфейса материала нет выбранной вкладки

Question

Я пытаюсь использовать вкладки UI Material для навигации.Однако в моем приложении есть маршруты, которые не соответствуют ни одной из вкладок.Когда я передаю значение компоненту «Вкладки», которое не соответствует ни одному из значений дочерней вкладки, я получаю предупреждение о недопустимом значении.

При создании скрытой вкладки в качестве обходного пути будет использоваться значение null..

1. Можно ли отключить это предупреждение о недопустимом значении вкладки?
2. Могут ли вкладки в пользовательском интерфейсе материала не иметь выбора?

Спасибо

Answer 1

Похоже, что установка свойства 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 >

Как и в ответе Philips, ключ находится в {this.state.content !== "login" ? this.state.content : false} который предотвращает рендеринг Tabs со значением "login".Вместо этого ему присваивается значение «ложь», которое разрешено и не вызывает предупреждение.

Answer 2

Значение текущей выбранной вкладки.Если вам не нужна выбранная вкладка, вы можете установить для этого свойства значение 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>
  );
}