如何在 React 中创建多级下拉菜单

编者注：这篇文章已于 2022 年 8 月 17 日更新，以更新代码示例和项目说明，并添加有关多级菜单与巨型菜单和实现菜单项路由的部分。

多级下拉菜单是网页设计的主要内容。由于能够提供多个选项以供选择，它们使导航栏变得动态和有条理。

对于任何在 React 或任何基于 React 的项目（如 Gatsby 或 Next.js）中工作的开发人员，本教程将逐步介绍如何在 React 项目中实现下拉功能。

在本指南的最后，我们将看到以下菜单：

要学习本教程，请确保您对 React 有基本的了解并确认您的计算机上安装了 Node.js。然后，我们就可以开始了。

以下是我们将介绍的内容：

• 多级菜单与大型菜单

• React 中的多级下拉菜单项目设置

• React 项目结构

  • 创建项目文件

• 渲染顶级菜单项

• 渲染单级下拉菜单

  • 切换下拉菜单

• 添加多级下拉菜单组件

  • 渲染多级下拉菜单

  • 检测菜单深度级别

• 当用户在其外部单击时关闭下拉菜单

• 在鼠标悬停时切换下拉菜单以获得更大的屏幕

• 实现路由

  • 将 React 应用程序连接到浏览器的 URL

  • 更新内部链接

  • 添加一些路线

  • 可链接的下拉按钮

  • 单击项目时关闭下拉菜单

  • 小屏幕上的单级下拉菜单

多级菜单与大型菜单

多级菜单旨在在我们单击或悬停在子菜单项上时显示深度嵌套的导航，如上面的 GIF 所示。这种设计非常适合中小型企业网站或博客。

另一方面，超级菜单可以立即显示整个网站的导航，而无需单击子菜单。也就是说，单个扩展可以显示一个深度嵌套的网站菜单。这种设计对于具有许多类别和子类别的大型网站非常有用，例如零售网站。

React 中的多级下拉菜单项目设置

create-react-app让我们使用CLI创建一个新的 React 项目：

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

npx 创建反应应用反应多级下拉菜单

然后执行以下操作：

cd 反应多级下拉菜单
npm 开始

React 项目结构

让我们可视化我们的项目并将用户界面分解为小组件：

上图中带编号的标签对应于以下组件名称：

1. App: 父/根组件

2. Header：呈现徽标和导航栏内容

3. Navbar: 渲染MenuItems组件

4. MenuItems：呈现单个项目和下拉列表

5. Dropdown: 也渲染菜单项

从这个细分中，我们将创建五个不同的组件。稍后我们将在开始使用路由时添加更多组件。

正如我们所见，这个项目在页面顶部呈现菜单导航。尽管如此，将应用相同的过程来呈现侧边栏中的导航。

创建项目文件

在src文件夹中，让我们确保文件树遵循以下结构：

...
  ├── 源
  │ ├── 组件
  │ │ ├── App.js
  │ │ ├── Dropdown.js
  │ │ ├── Header.js
  │ │ ├── MenuItems.js
  │ │ └── Navbar.js
  │ ├── App.css
  │ └── index.js

在components/App.js文件中，让我们渲染一些简单的文本：

常量应用 = () => {
  返回<div>应用内容</div>；
};
​
导出默认应用程序；

保存文件。现在将src/index.js文件的内容替换为以下内容：

---

来自 LogRocket 的更多精彩文章：

• 不要错过来自 LogRocket 的精选时事通讯The Replay

• 使用 React 的 useEffect优化应用程序的性能

• 在多个 Node 版本之间切换

• 了解如何使用 AnimXYZ 为您的 React 应用程序制作动画

• 探索 Tauri，一个用于构建二进制文件的新框架

• 比较NestJS 与 Express.js

• 发现TypeScript 领域中使用的流行 ORM

---

从“反应”导入反应；
从 'react-dom/client' 导入 ReactDOM；
从'./components/App'导入应用程序；
​
// 样式
导入'./App.css'；
​
const root = ReactDOM.createRoot(document.getElementById('root'));
根.渲染（
  <React.StrictMode>
    <应用 />
  </React.StrictMode>
);

我们已经导入了一个 CSS 文件来为我们的项目添加我们想要的“外观”。所以，让我们从 multilevel-dropdown-menu 项目中复制样式来替换src/App.css文件中的样式。

保存所有文件并查看App在浏览器中呈现的组件的内容。

渲染顶级菜单项

让我们通过渲染顶级菜单项开始构建。为此，让我们创建一个src/menuItems.js文件来保存菜单项：

导出常量 menuItems = [
  {
    标题：“家”，
    网址：'/'，
  },
  {
    标题：“服务”，
    网址：'/服务'，
  },
  {
    标题：“关于”，
    网址：'/关于'，
  },
];

现在，保存文件。

如果我们从一开始的项目图像中回忆，该components/App.js文件将渲染Header包含徽标的组件和Navbar组件。因此，在components/Header.js文件中，让我们添加以下代码：

从'./Navbar'导入导航栏；
​
常量头 = () => {
  返回 （
    <标题>
      <div className="nav-area">
        <a href="/" className="logo">
          标识
        </a>
        <导航栏/>
      </div>
    </标题>
  );
};
​
导出默认标题；

现在，我们使用<a>内部链接的标签。在本指南的后面部分，我们将Link使用.NavLink``react-router-dom

请注意，我们导入了Navbar组件。因此，转到components/Navbar.js并添加以下代码：

常量导航栏 = () => {
  返回 （
    <导航>
      <ul className="menus">此处导航项目</ul>
    </nav>
  );
};
​
导出默认导航栏；

接下来，让我们确保更新components/App.js文件以呈现Header组件：

从'./Header'导入标题；
​
常量应用 = () => {
  返回 （
    <div>
      <标题