React和Bootstrap 5中折叠导航栏无法工作

Question

由于某些原因，在较小的屏幕上，折叠的导航栏图标在单击时无法展开。我复制了Bootstrap 5的示例，并确保包含了Bootstrap CSS / JS和jQuery。

class NavBar extends Component {
    render() {
      return (
        <div className="NavBar">
            <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
                <div className="container-fluid">
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                      <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
                      <div className="navbar-nav mx-auto">
                        <HashLink className="navbar-brand" to="/#app">
                            Site
                        </HashLink>
                        <HashLink className="nav-link" to="/#about">
                            About
                        </HashLink>
                        <HashLink className="nav-link" to="/#skills">
                            Skills
                        </HashLink>
                        <HashLink className="nav-link" to="/#experience">
                            Experience
                        </HashLink>
                        <Link className="nav-link" to="/calculator">
                            Calculator
                        </Link>
                      </div>
                    </div>
                </div>
            </nav>
        </div>
      );
    }
}

- evvanerb

---

根据您的描述和上面提供的代码，它应该可以工作。检查输出代码以找出问题所在。 - Gellio Gao

Answer 1

问题是我们没有添加Bootstrap js文件，因此请在App.js文件中添加它。

  import 'bootstrap/dist/js/bootstrap.bundle';

- Saffron-codes

---

我添加了但还是不起作用。 - ErShakirAnsari

Answer 2

我在这里找到了一个使用 React Hooks 可行的解决方案：https://dev.to/johnotu/how-to-toggle-bootstrap-navbar-collapse-button-in-react-without-jquery-joo

import React, { useState } from 'react';
import Logo from '../images/logo_512x512.png';

const TopNav = props => {
  const [isNavCollapsed, setIsNavCollapsed] = useState(true);

  const handleNavCollapse = () => setIsNavCollapsed(!isNavCollapsed);

  return (
    <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
      <a class="navbar-brand text-info font-weight-bolder" href="/">
        <img src={Logo} alt="Logo" width="36" height="36" className="vertical-align-middle" />
        <span className="">Discounter</span>
      </a>
      <button class="custom-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded={!isNavCollapsed ? true : false} aria-label="Toggle navigation" onClick={handleNavCollapse}>
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`} id="navbarsExample09">
        <a className="nav-link text-info" href="/contact">Support</a>
        <a className="nav-link text-info" href="/login">Login</a>
        <a href="/request-demo" className="btn btn-sm btn-info nav-link text-white" >Request demo</a>
      </div>
    </nav>
  );
}

export default TopNav;

- evvanerb

Answer 3

我遇到了同样的问题，我通过在data-toggle和data-target中添加-bs来解决它们。分别变成了data-bs-toggle和data-bs-target。

这是我的package.json依赖项：

• "bootstrap": "^5.2.0",
• "jquery": "^3.6.0",
• "popper.js": "^1.16.1",
• "react": "^18.2.0",
• "react-dom": "^18.2.0",

示例代码：

从以下代码更改：

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

Changed to:

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

- Mars

---

我正在开发的项目之前使用的是Bootstrap 4，现在改为了5，唯一缺少的就是"-bs"，这样折叠功能就可以正常工作了。谢谢！ - lime_ajinomoto

Answer 4

你必须导入这个。 import 'bootstrap/dist/js/bootstrap.bundle';

<nav class="navbar navbar-expand-lg navbar-light bg-light">

导航栏

主页

链接

下拉菜单

操作

另一个操作

这里还有其他内容

禁用

搜索

- Tufail Mashwani

---

目前你的回答写得不清楚。请编辑并添加更多细节，以帮助其他人了解这如何回答所提出的问题。你可以在帮助中心找到更多撰写良好回答的信息。 - Community