React Navigation компонент условного рендеринга - PullRequest
Новая
       6

React Navigation компонент условного рендеринга

0 голосов
/ 22 октября 2018

У меня есть компонент навигации в приложении React, и я хочу, чтобы левая и правая кнопки переходили на разные страницы в зависимости от того, на какой странице я нахожусь.В этом примере я на странице / 2, поэтому левая кнопка переходит в / 1, а вправо в /3.

class Navigation extends Component {
 render() {
  return (
   <div>
    <Navbar className="nav" expand="md">
      <Nav navbar>
        <div className="m-auto">
          <NavItem>
            <NavLink to="/1" tag={RouterNavLink}>
              <FontAwesomeIcon icon={faAngleLeft} />
            </NavLink>
          </NavItem>
          <h1>Title</h1>
          <NavItem>
            <NavLink to="/3" tag={RouterNavLink}>
              <FontAwesomeIcon icon={faAngleRight} />
            </NavLink>
          </NavItem>
        </div>
      </Nav>
    </Navbar>
   </div>
  );
 }
}

Есть ли способ, например, написать операторы, которые изменят Navlink на= "" свойство?

Например, когда я на странице / 3, левый переходит в / 2, а правый в / 4 и т. д.

Я не совсем уверенэто правильный подход, поэтому любые советы приветствуются.

1 Ответ

0 голосов
/ 22 октября 2018

Вы можете использовать обратную галочку и написать динамическую ссылку, как вам нравится, для этого вам нужно сохранить текущий идентификатор в состоянии: 

<NavItem>
        <NavLink to=`/${this.state.currentId-1}` tag={RouterNavLink}>
          <FontAwesomeIcon icon={faAngleLeft} />
        </NavLink>
      </NavItem>
      <h1>Title</h1>
      <NavItem>
        <NavLink to=`/${this.state.currentId+1}` tag={RouterNavLink}>
          <FontAwesomeIcon icon={faAngleRight} />
        </NavLink>
      </NavItem>

Но вы должны поставить дополнительную проверку, когда идентификатор не существует

...