Question

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

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

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>

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

Answer 1

您的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"属性。

当您尝试使用toggler icon将id与菜单选项连接时，应该像data-target="#navbarSupportedContent"那样将#用于id，而不是使用{ {1}}，这就是您的/无法正常工作的原因。

Answer 2

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

为什么我的导航栏折叠切换无法在react

2 个答案: