Question

我的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>
  );
 }
}

是否可以编写例如if语句将Navlink更改为=“”属性的方法？

例如，当我在/ 3页上时，左边的是/ 2，右边的是/ 4，等等。

我完全不确定这是正确的方法，因此欢迎提出任何建议。

Answer 1

您可以根据需要使用反向标记并编写动态链接，因为您必须将当前ID保存为状态：

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

但是当id不存在时，您必须进行额外的检查

React Navigation组件条件渲染

1 个答案: