如何基于constant.js动态生成带下拉菜单的Bootstrap 5导航栏

当然可以通过在constant.js中扩展数据结构，配合条件渲染实现带下拉菜单的导航栏，具体步骤如下：

1. 修改constant.js，添加下拉菜单数据 #

给需要包含下拉菜单的导航项新增children数组，存储子菜单的相关信息：

export const navLinks = [
    {
      id: "manage",
      title: "Manage",
      // 新增下拉子项数据
      children: [
        { id: "add-user", title: "Add User", href: "#add-user" },
        { id: "edit-user", title: "Edit User", href: "#edit-user" }
      ]
    },
    { id: "transactions", title: "Transactions", href: "#transactions" },
    {
      id: "report",
      title: "Report Maintenance",
      children: [
        { id: "admin-report", title: "Admin Report", href: "#admin-report" },
        { id: "user-report", title: "User Report", href: "#user-report" }
      ]
    },
    { id: "support", title: "Support", href: "#support" },
    { id: "logout", title: "Logout", href: "#logout" },
  ];

2. 修改渲染代码，动态生成下拉菜单 #

通过条件判断导航项是否存在children字段，分别渲染普通导航项和带下拉的导航项：

<ul className="navbar-nav ms-auto mb-2 mb-lg-0">
  {navLinks.map((nav) => (
    // 判断当前项是否包含下拉子菜单
    nav.children ? (
      <li className="nav-item dropdown" key={nav.id}>
        <a 
          className="nav-link dropdown-toggle" 
          href="#" 
          role="button" 
          data-bs-toggle="dropdown" 
          aria-expanded="false"
        >
          {nav.title}
        </a>
        <ul className="dropdown-menu">
          {nav.children.map((child) => (
            <li key={child.id}>
              <a className="dropdown-item" href={child.href}>
                {child.title}
              </a>
            </li>
          ))}
        </ul>
      </li>
    ) : (
      <li className="nav-item" key={nav.id}>
        <a className="nav-link" aria-current="page" href={nav.href || `#${nav.id}`}>
          {nav.title}
        </a>
      </li>
    )
  ))}
</ul>

关键说明： #

• 利用Bootstrap 5的dropdown系列类名实现下拉样式，data-bs-toggle="dropdown"用于触发下拉交互
• 通过nav.children的存在与否区分两种导航项类型，实现动态渲染
• 给每个列表项添加独立的key，符合React列表渲染的要求
• 普通导航项保留了原有的#${nav.id}跳转逻辑，同时支持通过href字段自定义链接

内容的提问来源于stack exchange，提问作者Joseph Kyle Diel Mahasol