Gatsbyjs - 使用 reactstrap 折叠导航栏

Question

我正在开发一个使用 Gatsby.js 构建的网站，并为 ui 组件使用 reactstrap。但我对小屏幕上折叠的导航栏有疑问。

我需要在每次单击后折叠导航以使其与 gatsby-link 一起使用，但在加载新页面后折叠不会折叠。

所以我通过 onClick 向所有链接添加了一个 closeNavbar 方法，但无论出于何种原因，这都不起作用。

这是我的导航组件：

import React from "react";
import Link from "gatsby-link";
import {
  Collapse,
  Container,
  Navbar,
  NavbarToggler,
  Nav,
  NavItem
} from "reactstrap";

export default class Navigation extends React.Component {
  constructor(props) {
    super(props);

    this.toggleNavbar = this.toggleNavbar.bind(this);
    this.closeNavbar = this.closeNavbar.bind(this);
    this.state = {
      collapsed: true
    };
  }

  toggleNavbar() {
    this.setState({
      collapsed: !this.state.collapsed
    });
  }

  closeNavbar() {
    if (this.state.collapsed == true) {
      this.toggleNavbar();
    }
  }

  render() {
    return (
      <header>
        <Navbar className="navigation__navbar" light expand="md">
          <Container>
            <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
            <Collapse isOpen={!this.state.collapsed} navbar>
              <Nav className="mr-auto" navbar>
                <NavItem>
                  <Link className="nav-link navigation__navlinks" to="/">
                    Home
                  </Link>
                </NavItem>
                <NavItem>
                  <Link
                    onClick={this.closeNavbar}
                    className="nav-link navigation__navlinks"
                    to="/leistungen/"
                  >
                    Leistungen
                  </Link>
                </NavItem>
                <NavItem>
                  <Link
                    onClick={this.closeNavbar}
                    className="nav-link navigation__navlinks"
                    to="/kuechen/"
                  >
                    Küchen
                  </Link>
                </NavItem>
              </Nav>
            </Collapse>
          </Container>
        </Navbar>
      </header>
    );
  }
}

Answer 1

closeNavbar 方法出现错误。我试图切换它，只有当它已经折叠时。这是正确的代码：

  closeNavbar() {
    if (this.state.collapsed !== true) {
      this.toggleNavbar();
    }
  }