为什么我的导航栏折叠切换在反应中不起作用答案

【问题标题】：Why is my navbar collapse toggle not working in react为什么我的导航栏折叠切换在反应中不起作用
【发布时间】：2019-10-06 00:10:33
【问题描述】：

我想创建一个响应式导航栏。但是切换不起作用。我该怎么办？

我添加了 bootstrap 文档中指定的 bootstrap、jQuery 和 popper.js 链接，并创建了一个导航栏组件。导航栏的样式应该是未折叠时的样式，但折叠后切换不起作用。

import React, { Component } from 'react';

import "jquery/dist/jquery"
import "bootstrap/dist/js/bootstrap";
import 'bootstrap/dist/css/bootstrap';

class Navbar extends Component {
    render() {
        return (
            <React.Fragment>
                
                <nav className="navbar navbar-expand-lg navbar-light bg-light">
                    <a className="navbar-brand" href="/">Aditya Chopra</a>
                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="/navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>

                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul className="navbar-nav mr-auto">
                            
                            <li className="nav-item">
                                <a className="nav-link" href="/About">About</a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link" href="/Contact">Contact</a>
                            </li>
                            <li className="nav-item active">
                                <a className="nav-link" href="/Projects">Projects </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </React.Fragment> 
        );
    }
}

export default Navbar;

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <title>Aditya Chopra</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

当视口足够小时，我希望它通过切换按钮展开导航栏，但它什么也没做。

【问题讨论】：

ReactJs 集成了状态。你的代码没有。你应该看看reactstrap，它为你集成了所有的引导组件。

标签： javascript jquery css reactjs twitter-bootstrap

【解决方案1】：

试试https://react-bootstrap.github.io/components/navbar/ 或https://mdbootstrap.com/docs/jquery/navigation/navbar/。

尝试在 codepen 中使用 react-bootstrap 时，我遇到了 Nav.Link 的问题，因此使用了 react-router 中的 Link。

const Navbar = ReactBootstrap.Navbar;
const Button = ReactBootstrap.Button;
const Form = ReactBootstrap.Form;
const NavDropdown = ReactBootstrap.NavDropdown;
const Nav = ReactBootstrap.Nav;
const FormControl = ReactBootstrap.FormControl;
const NavItem = ReactBootstrap.NavItem;
const Link = ReactRouter.Link;

class App extends React.Component {
  constructor(props) {
    super(props);
  }

    render() {
      return (
        <Navbar bg="light" expand="lg"> 
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
           <Navbar.Collapse id="basic-navbar-nav">
             <Nav className="mr-auto">
                <NavItem componentClass={Link} href="/" to="/">Home</NavItem>
               <NavItem componentClass={Link} href="/projects" to="/">Projects</NavItem>
               <NavItem componentClass={Link} href="/about" to="/">About us</NavItem>
               <NavItem componentClass={Link} href="/contact" to="/">Contact us</NavItem>
              </Nav>
              </Navbar.Collapse>
          </Navbar>
  );
}
};

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

半成品代码示例：https://codepen.io/vardamanpk/pen/dEzKOx

【讨论】：

【解决方案2】：

您的data-target 属性在此处未正确设置，

<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="/navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span className="navbar-toggler-icon"></span>
</button>

上面代码中的问题是data-target="/navbarSupportedContent" 属性。

当您尝试使用id 将您的toggler icon 与您的菜单选项连接时，您应该使用# 代替id，例如data-target="#navbarSupportedContent"，而不是使用/，这就是您的toggler icon 的原因不工作。

【讨论】：