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();
    }
  }

Gatsbyjs-使用reactstrap折叠导航栏

1 个答案: