Bootstrap 下拉菜单在 NextJS 项目中不起作用答案

【问题标题】：Bootstrap Drop Down Menu is not working in NextJS ProjectBootstrap 下拉菜单在 NextJS 项目中不起作用
【发布时间】：2021-10-23 17:54:45
【问题描述】：

我在 VS Code 上创建了一个 NEXT.JS 应用程序。我在导航栏中创建了一个下拉菜单，但是当单击下拉菜单时，它不会向下滑动并且菜单不显示。

这是我正在尝试使用的代码，

const loggedRouter = () => {
    return(
      <li className="nav-item dropdown">
          <a className="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <img src={auth.user.avatar} alt={auth.user.avatar} 
              style={{
                  borderRadius: '50%', width: '30px', height: '30px',
                  transform: 'translateY(-3px)', marginRight: '3px'
              }} /> {auth.user.name}
          </a>

          <div className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <Link href="/profile">
                  <a className="dropdown-item">Profile</a>
              </Link>
              {
                  auth.user.role === 'admin' && adminRouter()
              }
              <div className="dropdown-divider"></div>
              <button className="dropdown-item" onClick={handleLogout}>Logout</button>
          </div>
      </li>
  )
  }

这个loggedRouter函数正在下面的导航栏中使用，

  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <Link href="/"><a className="navbar-brand">Renae</a></Link>
      <button
        className="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span className="navbar-toggler-icon"></span>
      </button>
      <div className="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
        <ul className="navbar-nav">
          <li className="nav-item">
            <Link href="/cart">
                <a className={"nav-link" + IsActive('/cart')}><i className="fas fa fa-shopping-cart" aria-hidden="true"></i> Cart</a>
            </Link>
           
          </li>

          {
            Object.keys(auth).length === 0 ?
            <li className="nav-item">
            <Link href="/signin">
                <a className={"nav-link" + IsActive('/signin')}><i className="fas fa-user" aria-hidden="true"></i> Sign in</a>
            </Link>
           
            </li>

          : loggedRouter()
          }
          
        </ul>
      </div>
    </nav>
  );

我在 loggedRouter 函数中收到这两个警告，

The attribute aria-haspopup is not supported by the role link. This role is implicit on the element a.eslintjsx-a11y/role-supports-aria-props

^这一项与在下拉菜单中使用 aria-haspopup 属性有关。不过我觉得这没什么好担心的。

第二个警告是这样的，

Do not use <img>. Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element.eslint(@next/next/no-img-element)

这也与imagae标签有关，我认为它与实际问题无关

这是我的文档文件包含的内容，

import Document, {Html, Head, Main, NextScript} from 'next/document'
class MyDocument extends Document {
    render() {
        return (
            <Html lang="en">
                <Head>
                    <meta name = "description" content = "Renae.pk" />
                    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
                    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
                    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

export default MyDocument

在这个文件中，我添加了 Bootstrap CSS 和 JavaScript 链接。对于 Javascript 链接，我收到了这些警告/错误，

External synchronous scripts are forbidden. See: https://nextjs.org/docs/messages/no-sync-scripts.eslint(@next/next/no-sync-scripts)

出于某种原因，我相信这是我的下拉菜单无法正常工作的实际原因。谁能帮我弄清楚我应该改变什么来解决这个问题？

【问题讨论】：

不是直接解决您的问题，但您是否考虑过使用react-bootstrap 代替？

标签： javascript jquery bootstrap-4 next.js navbar

【解决方案1】：

Bootstrap 使用“显示”类来控制下拉菜单的可见性。使用 'useState' 控制下拉菜单的可见性

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。