用反应滚动反应导航栏

Question

有人可以帮助我吗？我有同样的问题，例如React bootstrap navbar collapse not working? 它工作正常，但在响应模式下单击任何导航项时导航栏不会折叠。

import React from 'react'
import Logo from "../img/logo_large.png"
// React Font awesome imports
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars } from "@fortawesome/free-solid-svg-icons"
//React-scroll install
import { Link} from "react-scroll"

//Navbar
const Navbar = () => {
    return (
        //Hier kann man einstellen wie die Navigationbar ist (z.B. dunkel)
        <nav className="navbar navbar-expand-lg navbar-light bg-dark fixed-top">
            <div className="container">
                {/*Logo variable von oben*/}
                <Link smooth={true} eventKey="2" to="home" className="navbar-brand" href="#"><img className="Logo" src={Logo} /> </Link>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <FontAwesomeIcon icon={faBars} style={{ color: "#fff" }} />
                </button>

                <div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target=".navbar-collapse.show">
                    {/*ml-auto --> damit es rechts angezeigt wird*/}
                    <ul className="navbar-nav ml-auto">
                        <li className="nav-item active">
                            <Link smooth={true} eventKey="2" to="about" offset={-70} className="nav-link" href="#">About Me<span className="sr-only">(current)</span></Link>
                        </li>
                        <li className="nav-item">
                            <Link smooth={true} eventKey="2" to="services" offset={-70} className="nav-link" href="#">Services</Link>
                        </li>
                        <li className="nav-item">
                            <Link smooth={true} eventKey="2" to="experiences" offset={-70} className="nav-link" href="#">Experiences</Link>
                        </li>
                        <li className="nav-item">
                            <Link smooth={true} eventKey="2" to="abilities" offset={-70} className="nav-link" href="#">Abilities</Link>
                        </li>
                        <li className="nav-item">
                            <Link smooth={true} eventKey="2" to="blog" offset={-70} className="nav-link" href="#">Blog</Link>
                        </li>
                        <li className="nav-item">
                            <Link smooth={true} eventKey="2" to="freetime" offset={-70} className="nav-link" href="#">Freetime</Link>
                        </li>
                        <li className="nav-item">
                            <Link smooth={true} eventKey="2" to="contact" offset={-70} className="nav-link" href="#">Contact</Link>
                        </li>
                    </ul>
                </div>
            </div>
        </nav >
    )
}

export default Navbar

Answer 1

您必须使用React Bootstrap 才能启用切换功能。请参阅here 给出的示例。

如果您不想使用 React Bootstrap，请使用 onClick 事件处理程序来切换导航栏。