在前端开发中，我们经常需要使用菜单组件来实现网站或应用的导航功能。而使用 npm 包 react-vertical-menu 可以方便地实现垂直菜单，使网站或应用更加美观和易于操作。本文将为大家介绍如何使用该 npm 包。
安装 react-vertical-menu
使用 npm 包管理工具，可以快速方便地安装 react-vertical-menu。
在命令行中输入以下命令，即可安装最新版本的 react-vertical-menu：
npm install react-vertical-menu
导入 react-vertical-menu
在项目中导入 react-vertical-menu，需要使用 ES6 的 import 语句：
import { VerticalMenu } from 'react-vertical-menu';
import 'react-vertical-menu/dist/index.css';使用 react-vertical-menu
使用 react-vertical-menu 组件，需要实例化一个 VerticalMenu 对象，并传入相应的参数，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - ---- ----------------------
------ -------------------------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
---------- -
- ----- ----- --- ----- --------- --
- ----- ----- --- ----- --------- --
- ----- ----- --- ----- --------- --
- ----- ----- --- ----- --------- -
-
--
-
---------------------- -
----------------- ---- ----------- - -- -----------
-
-------- -
------ -
-------------
----------------------------
------------------------------
--
--
-
-其中，menuItems 是一个数组，每个元素是一个对象，包含菜单项的文本 text 和对应的链接 link；onItemClick 是一个回调函数，当用户点击某个菜单项时会调用该函数，并传入该项在菜单中的索引值。
参数说明
- items：菜单项数组，数组元素是包含菜单项文本和链接的对象；
- onItemClick：菜单项点击回调函数，当用户点击某个菜单项时触发，传入该项在菜单中的索引值。
总结
通过本文的介绍，我们了解了如何安装和使用 npm 包 react-vertical-menu。通过该组件的使用，我们可以方便地实现网站或应用的导航功能，提升用户体验。希望本文能够对您有所帮助。完整的示例代码可访问 react-vertical-menu 组件的 Github 主页：https://github.com/ygm125/react-vertical-menu。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730a81e8991b448e9374