React 和 Ant Design（以下简称 AntD）是当前前端开发中非常受欢迎的两个技术栈。本文将介绍如何使用 React 和 AntD 搭建菜单组件并实现一些常用功能。
为什么要使用 AntD
AntD 是一个优秀的 UI 库，它包含了丰富的组件、样式和工具，可以快速搭建一个现代化、美观大气的 web 应用。AntD 遵循响应式设计，支持移动端和桌面端的自适应，并提供了强大的主题定制功能，可以满足不同项目的需求。
菜单组件的需求分析
在很多 web 应用中，菜单是必须的组件之一。它通常包含了网站的主要导航、功能入口等信息。在本次实现的菜单组件中，我们将实现以下功能：
- 通过路由配置自动生成菜单项，并支持嵌套。
- 支持菜单项的展开和收缩，并自动选中当前路由所对应的菜单项。
- 支持菜单项的点击事件，并在页面刷新时自动选中当前路由。
- 支持菜单主题的定制。
路由配置
为了实现自动生成菜单项的功能，我们需要先配置路由。React Router 是一个流行的路由库，它提供了多种路由定义方式，其中最简单的方式是通过 JSON 对象定义。这里我们将使用 JSON 方式来定义路由。
-- -------------------- ---- -------
----- ------ - -
-
----- --------
----- -----
---------- -----
--
-
----- -------------
----- ------
----- ------------------ ---
--------- -
-
----- ----------------------
----- ------
---------- ---------
--
-
----- ---------------------
----- ------
---------- --------
--
-
----- -----------------------
----- ------
---------- ----------
--
--
--
-
----- --------
----- ------
----- ------------- ---
--------- -
-
----- --------------
----- -------
---------- ----------
--
-
----- -------------
----- -------
---------- ---------
--
-
----- -----------------
----- -------
---------- -------------
--
--
--
---
--上面的代码中，我们定义了三个顶级路由，分别为 home、dashboard 和 form。其中 dashboard 和 form 路由都有对应的子路由，用于支持横向扩展。每个路由对象包含了 path、name、component 和 children 等属性。其中 path 和 component 是必须的，name 是用于显示菜单项文本的属性，icon 是用于显示菜单项图标的属性， children 是子路由定义。
菜单组件实现
接下来，我们将使用 AntD 的 Menu 和 Icon 组件来实现菜单项的显示和操作。在 Menu 组件中，我们可以使用 mode 属性来设置菜单的展示模式为 inline，这样可以将菜单项在垂直方向上排列。selectedKeys 属性可以用于设置当前被选中的菜单项，而 onSelect 属性则用于监听菜单项的选中事件。
在 Menu.Item 组件中，我们可以设置 key、name 和 icon 属性，这样可以渲染出对应的菜单项。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------
------ -
------------------
-------------
-------------
- ---- --------------------
------ - ------ - ---- -----------
----- - ------- - - -----
----- ------- - -- -------- -- -- -
----- ---------- ------------ - -------------------
----- --------------- - ----------------- -- ------------------- -- --------
----- -------------------- - ------ -- -
----- ------------- - --------------- -- --------------------- --- ----
-- --------------------------------------- --- --- -
------------------
- ---- -
------------------------- - --------------- - ----
-
--
------ -
-----
------------
-------------
----------------------------------
-------------------
-----------------------------------
-
-------------- ----- ----- ----- -------- -- -- -
-- ---------- -
------ -
-------- ---------- ----------- -------------
--------------------- -- -
---------- -----------------------------------------
---
----------
--
-
------ -
---------- ---------- ------------
------
------------
--
---
-------
--
--
------ ------- --------在上面的代码中，我们使用了 React 的 useState 钩子来维护菜单项的展开状态。rootSubmenuKeys 变量用于记录有子路由的菜单项的 path 属性，以便在展开和收缩菜单项时进行判断。handleMenuOpenChange 函数用于监听菜单项的展开和收缩事件，以便于更新菜单项的展开状态。在 Menu.SubMenu 组件中，我们使用了 title 属性来显示菜单项的名称，而在 Menu.Item 组件中，我们直接渲染了菜单项的名称。
菜单组件应用
一旦实现了菜单组件，我们就可以在页面中进行应用了。在下面的示例代码中，我们将 AppMenu 组件作为侧边栏组件来使用，这样就可以在左侧显示出我们实现的菜单项。同时，我们还引入了 react-router-dom 库中的 Switch 和 Route 组件，这样就可以在右侧显示出选中的路由所对应的组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------- ----- - ---- -------------------
------ - ------ - ---- -------
------ ------- ---- ------------
------ - ------ - ---- -----------
------ ------------
----- - ------- ------- - - -------
----- --- - -- -- -
------ -
--------
--------
------- -------------------
---- ---------------- --
------------- --
---------
--------
-------- --
------- ------------------------
-------- -------- ------- ----- ---- -- ---
---- ---------------------------------- -------- -------- -- ---
--------
------------------- -- -
------
----------------
-----------------
-------------------
---------------------------
--
---
---------
------
----------
---------
---------
---------
---------
--
--
------ ------- ----在上面的代码中，我们使用了 AntD 的 Layout 组件，其中 Header 组件用于显示顶部栏，Content 组件用于显示选中路由所对应的组件，而 Layout 组件则用于布局侧边栏和内容部分。Switch 和 Route 组件可以在路由匹配时动态创建对应的组件实例，从而实现页面的动态切换。
主题定制
AntD 提供了多种主题定制方式，最简单的方式是通过修改 less 变量来实现。在项目中引入 less-loader 后，可以通过在 theme.less 文件中定义 AntD 的 less 变量来修改主题。
例如，要将菜单项背景颜色改为蓝色，可以在 theme.less 文件中添加如下代码：
@menu-bg: #1890ff;
修改完毕后，需要重新编译项目才能生效。
总结
本文介绍了如何使用 React 和 AntD 来实现一个菜单组件，并支持嵌套、展开和收缩、路由匹配和定制主题等功能。菜单组件是一个常用的 UI 组件，掌握这些技能可以让我们在项目开发中更加高效地构建出美观、实用、易用的 web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653dc0327d4982a6eb774225