--- theme: orange --- ## 前言 ChakraUI 是一个简单、模块化且有可访问性的组件库。由于 ChakraUI 组件库的定位是趋向于提供 UI 组件的，所以在业务方面的功能会比较少，不像 antd 那样可以开箱即用。因此最近在基于 ChakraUI 组件库进行一些更上层的组件封装。这篇文章介绍的是 **菜单导航组件** 的实现，先看最终看实现效果： ![temp.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87fbe28964ec4ba4a18316697c6132f0~tplv-k3u1fbpfcp-watermark.image?) ## 实现过程 ### 数据结构设计首先根据前面的实现效果可以看到，我们的菜单一共只有两级，且子级是不带有图标的。并没有设计为可以无限嵌套的菜单，因此数据的定义也比较简单： ```ts export type MenuList = { icon: React.ReactNode; title: string; path: string; subMenu?: { title: string; path?: string }[]; }[]; ``` - icon: 图标，这里用的 `React.ReactNode` 是希望传入图标能灵活些 - path: 菜单的跳转路径 - subMenu: 子级菜单 ### 功能实现 #### 父菜单样式定义好了数据结构，我们就从最简单的样式开始实现。首先要实现外层的菜单样式： ```tsx import { Box, BoxProps, Flex, Icon } from "@chakra-ui/react"; import { MenuList } from "./types"; import { BiAlarm } from "react-icons/bi"; import { FiChevronDown } from "react-icons/fi"; const testMenuList: MenuList = [ { title: "BiAlarm", icon: , subMenu: [ { title: "子级标题1" }, { title: "子级标题2" }, { title: "子级标题3" }, ], }, { title: "BiAlarm1", icon: , }, ]; const menuItemClass: BoxProps = { p: "4", cursor: "pointer", whiteSpace: "nowrap", transition: "all 0.2s", fontSize: "sm", _hover: { bg: "gray.50", }, }; const Menu: React.FC<{ menuList: MenuList }> = () => { return ( {testMenuList.map((menuItem, index) => { return ( {menuItem.icon} {{menuItem.title}} {menuItem.subMenu && ( )} ); })} ); }; export default Menu; ``` 这里我们先把外层菜单的样式写好，然后写了一份测试数据 `testMenuList` 用于遍历预览效果，在上面我将菜单的一些基础样式抽离为 `menuItemClass` 是为了一会儿可以在子级也用上。目前的效果如下图： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/35581973e77e43d6bb4bfeaada4ccdd9~tplv-k3u1fbpfcp-watermark.image?) 可以看到展开的图标已经可以根据是否存在 `subMenu` 进行展示了。 #### 子菜单样式子菜单就更简单了，在父级菜单项的底下加上以下代码： ``` {menuItem.subMenu?.map((subMenuItem) => { return ( {subMenuItem.title} ); })} ``` 这里复用了前面外层菜单的样式 `menuItemClass` ，因为 ChakraUI 中的样式都是以组件 props 的形式传入的，因此我们可以维护为一个对象进行复用。实现效果如下图： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4f0f1474714d4112851aaf4af8b00a5c~tplv-k3u1fbpfcp-watermark.image?) 子级菜单也实现好了，接下来我们开始实现功能。 #### 子菜单折叠功能首先我们实现一个子级的菜单折叠功能，这里我单独抽离了一个 hook 将展开相关的逻辑放在一起： ```tsx import { useState } from "react"; const useExpand = () => { const [expandedMenu, setExpandedMenu] = useState([]); const isExpanded = (index: number) => expandedMenu.includes(index); const setMenuExpand = (index: number) => { const existIndex = expandedMenu.indexOf(index); if (existIndex === -1) { // expand setExpandedMenu([...expandedMenu, index]); } else { // collapse setExpandedMenu(expandedMenu.filter((item) => item !== index)); } }; return { isExpanded, setMenuExpand }; }; export default useExpand; ``` `useExpand` 中定义了一个变量和两个方式： - `expandedMenu` 代表当前展开的菜单，由于可以同时展开多个菜单项因此使用数组来存储， - `isExpanded` 用于判断菜单项是否展开。 - `setMenuExpand` 则用于展开指定菜单项然后我们回到组件中调用这个 hook 并添加一些判断的逻辑： ```tsx import { Box, BoxProps, Flex, Icon } from "@chakra-ui/react"; import { MenuList } from "./types"; import { BiAlarm } from "react-icons/bi"; import { FiChevronDown } from "react-icons/fi"; import useExpand from "./hooks/useExpand"; const testMenuList: MenuList = [ { title: "BiAlarm", icon: , subMenu: [ { title: "子级标题1" }, { title: "子级标题2" }, { title: "子级标题3" }, ], }, { title: "BiAlarm1", icon: , }, ]; const menuItemClass: BoxProps = { p: "4", cursor: "pointer", whiteSpace: "nowrap", transition: "all 0.2s", fontSize: "sm", _hover: { bg: "gray.50", }, }; const Menu: React.FC<{ menuList: MenuList }> = () => { const { isExpanded, setMenuExpand } = useExpand(); return ( {testMenuList.map((menuItem, index) => { return ( { if (menuItem.subMenu) setMenuExpand(index); }} > {menuItem.icon} {{menuItem.title}} {menuItem.subMenu && ( )} {isExpanded(index) && menuItem.subMenu?.map((subMenuItem) => { return ( {subMenuItem.title} ); })} ); })} ); }; export default Menu; ``` 在上面的代码中，我们通过 `setMenuExpand(index)` 设置当前的展开菜单项，再通过 `isExpanded(index)` 来判断菜单是否展开，如果展开则将图标旋转 180 度指向上，并隐藏子菜单。实现效果如下： ![temp.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0d098efccd84b4d85a179c5543a3969~tplv-k3u1fbpfcp-watermark.image?) 这时候大家可以看到展开时子菜单直接隐藏和显示会非常僵硬，没有丝滑的感觉，因此我们再补充一个展开的动画，实现的代码如下： ```tsx import { AnimatePresence, motion } from "framer-motion"; {isExpanded(index) && ( {menuItem.subMenu?.map((subMenuItem) => { return ( {subMenuItem.title} ); })} )} ``` 这里我们使用了 [framer-motion](https://www.framer.com/motion/) 这个动画库： - `motion.div` 标签来帮助我们实现动画效果，在组件刚进入和离开时将透明度和高度设置为 0，然后慢慢展开。 - `AnimatePresence` 标签可以防止内部的组件没有展示离开的动画就直接销毁，它能将组件的销毁时机延后到离开动画执行结束。我们再看下效果： ![temp.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6681de5695b44ed29049927b70ee68ca~tplv-k3u1fbpfcp-watermark.image?) #### 菜单激活功能是不是看着丝滑了很多呢？接下来我们继续实现菜单点击后的激活效果，这里我还是单独创建了一个 hook 来耦合相关逻辑： ``` import { useState } from "react"; const useActive = () => { const [activatedMenu, setActivatedMenu] = useState<[number, number]>([ -1, -1, ]); const setMenuActive = (index: number, subIndex?: number) => { if (typeof subIndex !== "undefined") { setActivatedMenu([index, subIndex]); } else { setActivatedMenu([index, -1]); } }; return { activatedMenu, setMenuActive }; }; export default useActive; ``` - `activatedMenu` 代表当前已激活的菜单项，由于有两层，所以我定义了一个两个数字的元组，第一项代表外层的激活菜单，第二项代表内层的激活菜单，未激活时值为 `-1` - `setMenuActive` 用来设置当前的激活菜单，通过传入的索引值进行判断并设置然后继续在组件中调用 `useActive` ,并通过返回值去设置一些样式： ```diff import { Box, BoxProps, Flex, Icon, TextProps } from "@chakra-ui/react"; import { MenuList } from "./types"; import { BiAlarm } from "react-icons/bi"; import { FiChevronDown } from "react-icons/fi"; import { AnimatePresence, motion } from "framer-motion"; import useActive from "./hooks/useActive"; import useExpand from "./hooks/useExpand"; const testMenuList: MenuList = [ { title: "BiAlarm", icon: , subMenu: [ { title: "子级标题1" }, { title: "子级标题2" }, { title: "子级标题3" }, ], }, { title: "BiAlarm1", icon: , }, ]; + const activeClass: TextProps = { + color: "purple.400", + fontWeight: "semibold", + }; + const unActiveClass: TextProps = { + color: "gray.500", + fontWeight: "400", + }; const menuItemClass: BoxProps = { p: "4", cursor: "pointer", whiteSpace: "nowrap", transition: "all 0.2s", fontSize: "sm", _hover: { bg: "gray.50", }, }; const Menu: React.FC<{ menuList: MenuList }> = () => { const { activatedMenu, setMenuActive } = useActive(); + const { isExpanded, setMenuExpand } = useExpand(); + const onMenuClick = (index: number, item: MenuList[number]) => { + if (item.subMenu) { + setMenuExpand(index); + } else { + setMenuActive(index); + } + }; return ( {testMenuList.map((menuItem, index) => { return ( { + onMenuClick(index, menuItem); }} > {menuItem.icon} {menuItem.title} {menuItem.subMenu && ( )} {isExpanded(index) && ( {menuItem.subMenu?.map((subMenuItem, subIndex) => { return ( setMenuActive(index, subIndex)} > {subMenuItem.title} ); })} )} ); })} ); }; export default Menu; ``` 这里代码已经比较多了，我用 `diff` 来标注新增的内容，这里我新增了 `activeClass` 和 `unActiveClass` 两个表示激活和未激活状态的样式属性，然后通过 `activatedMenu` 判断菜单项是否激活，并将菜单展开和菜单激活的方法单独抽离为 `onMenuClick`。实现后的效果如下： ![temp.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b471ee189ee4c7e8b80910efb2ac3d1~tplv-k3u1fbpfcp-watermark.image?) 当点击无子菜单的菜单项会直接激活，否则就展开菜单。如果点击子菜单项，父菜单项和子菜单项都会获得激活效果。 #### 菜单栏整体折叠功能接下来我们实现整个菜单栏的折叠功能，这里和上面一样，我单独写了一个 hook 来实现菜单栏整体折叠相关的功能： ```tsx import { Tooltip, Flex, useBoolean, Icon } from "@chakra-ui/react"; import { AnimatePresence, motion } from "framer-motion"; import { FiChevronRight } from "react-icons/fi"; const useCollapse = () => { const [isMenuCollapse, { toggle: toggleMenuCollapse }] = useBoolean(false); const [isMenuCollapseBtnShow, { on: showCollapseBtn, off: hideCollapseBtn }] = useBoolean(false); const collapseButton = ( {isMenuCollapseBtnShow && ( )} ); return { isMenuCollapse, isMenuCollapseBtnShow, showCollapseBtn, hideCollapseBtn, collapseButton, }; }; export default useCollapse; ``` 这个 hook 会稍微复杂一些，主要是我将控制菜单折叠的按钮也直接写在了 hook 中，因为这个按钮与 hook 内的功能耦合比较深，下面分析下这个 hook 中的变量： - `isMenuCollapse` 表示菜单栏是否折叠 - `isMenuCollapseBtnShow` 表示折叠栏按钮是否展示 - `collapseButton` 则是一个 element ，表示用于折叠的按钮在上面的代码中，我同样使用了 `` 和 `` 标签来实现按钮出现和隐藏的动画效果。状态的定义我使用 chakraUI 内置的 `useBoolean` hook，它可以用于定义布尔类型状态并提供了以下三个函数： - `on`: 设置为 `ture`， - `off`: 设置为 `false` - `toggle`: 设置为相反值这里还有一个 ChakraUI 的使用技巧，我们可以使用 `role="group"` 与 `groupHover` 来实现当父元素 hover 时，子元素也可以与父元素同时设置 hover 效果： ```diff ``` 然后我们继续在原本的菜单组件中调用 `useCollapse`： ```diff const Menu: React.FC<{ menuList: MenuList }> = () => { const { activatedMenu, setMenuActive } = useActive(); const { isExpanded, setMenuExpand } = useExpand(); + const { collapseButton, showCollapseBtn, hideCollapseBtn, isMenuCollapse } = + useCollapse(); const onMenuClick = (index: number, item: MenuList[number]) => { if (item.subMenu) { setMenuExpand(index); } else { setMenuActive(index); } }; return ( showCollapseBtn()} + onMouseLeave={() => hideCollapseBtn()} > + {collapseButton} {testMenuList.map((menuItem, index) => { return ( { onMenuClick(index, menuItem); }} > {menuItem.icon} + {!isMenuCollapse && {menuItem.title}} {menuItem.subMenu && !isMenuCollapse && ( )} + {isExpanded(index) && !isMenuCollapse && ( {menuItem.subMenu?.map((subMenuItem, subIndex) => { return ( setMenuActive(index, subIndex)} > {subMenuItem.title} ); })} )} ); })} ); }; export default Menu; ``` 这一步我们将折叠按钮渲染在菜单中，并且通过 `onMouseEnter={() => showCollapseBtn()}` 和 `onMouseLeave={() => hideCollapseBtn()}` 实现了只有鼠标移入菜单才显示折叠按钮，然后根据 `isMenuCollapse` 状态增加了一些判断。实现的效果如下： ![temp.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/889317f70dc14f98b568458e65ffc0c9~tplv-k3u1fbpfcp-watermark.image?) #### 折叠状态弹出子菜单现在我们在将菜单栏折叠后，子菜单就无法显示了，我们没法在折叠状态下点击其他的子菜单，所以我们可以加一个弹出气泡来展示子菜单： ```tsx { onMenuClick(index, menuItem); }} > {menuItem.icon} {!isMenuCollapse && ( {menuItem.title} )} {menuItem.subMenu && !isMenuCollapse && ( )} ``` 这里我使用了 ChakraUI 的 `Popover` 组件来实现弹出的菜单。通过设置 `hidden={!isMenuCollapse || !menuItem.subMenu}` 在菜单未折叠的时候隐藏了气泡之所以使用 `hidden` 而不是直接条件判断，是因为不想组件被频繁的销毁挂载。由于子菜单需要在父菜单内和弹出气泡内同时使用，因此我将它在组件抽离为单独的变量进行复用： ```tsx onst renderSubMenu = ( subMenu: MenuList[number]["subMenu"], index: number, props?: BoxProps ) => { return subMenu?.map((subMenuItem, subIndex) => { return ( setMenuActive(index, subIndex)} {...props} > {subMenuItem.title} ); }); }; ``` 在这个函数中，除了子菜单 `subMenu` 和父菜单索引 `index` 外，还增加了一个 `props` 参数用于渲染 subMenu 时调整子菜单的样式。为什么这里不单独将子菜单抽成一个组件呢？因为 **子菜单内依赖的数据很多都是与父菜单耦合** 的，如果抽离组件就需要通过 props 去传数据。而且 **子菜单都是在当前组件内** 使用，并不需要在其他地方复用，因此就直接写成一个函数进行调用了，相比写成组件这样更加方便些。最终实现的效果是这样的： ![temp.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f3ed9c283c9743aebe2789a179c222ee~tplv-k3u1fbpfcp-watermark.image?) 到了这一步基本功能已经都完成了，但细心的彦祖已经发现了折叠状态下我看没法看到菜单项的标题了，只能看到一个图标，如果存在一些有多种意义的图标那在折叠状态下的使用体验就不太好了。因此，咱们可以添加一个 Tooltip 提示用于折叠状态下菜单标题的展示。 #### 折叠状态 Tooltip 提示添加 Tooltip 有一个注意点，具有子菜单的菜单项在折叠后 hover 时不应该显示 `Tooltip` ，而是正常显示 `Popover` > **Tooltip 和 Popover 不能与 trigger 元素共享同一个 DOM 元素** 如果我们直接在 `Popover` 内使用 `Tooltip` 组件，那么 `Popover` 在 hover 时是无法弹出的，只能弹出 `Tooltip`。因此我们两个单独的元素分别用于触发 `Popover` 和 `Tooltip` 。在我们的场景中，这个元素就是外层菜单项，因此我们可以将外层菜单项给抽离出来，就像子菜单项那样： ```tsx const renderMenuItem = (menuItem: MenuList[number], index: number) => { return ( { onMenuClick(index, menuItem); }} > {menuItem.icon} {!isMenuCollapse && {menuItem.title}} {menuItem.subMenu && !isMenuCollapse && ( )} ); }; ``` 然后添加 Toolltip 组件及相关的逻辑判断： ```tsx {menuItem.subMenu ? ( {renderMenuItem(menuItem, index)} ) : ( {renderMenuItem(menuItem, index)} )} ``` 除了 `Tooptip` 外，我还在 `Popover` 组件中增加了 `Header` ，使得具有子菜单的菜单项在弹出时也可以看到标题。最终效果如下： ![temp.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/50dc9c6821844230b254a1cf04b678f5~tplv-k3u1fbpfcp-watermark.image?) ## 总结这次的组件封装其实更多是趋向于样式方面，暂时还没加入路由跳转等更加接近业务的功能，主要提供一个样式上的实现思路。具体的功能大家可以基于业务去进行补充。后续这类组件封装的文章可能会出一个系列，也准备把这些组件都开源了，如果有使用或打算使用 `ChakraUI` 进行项目搭建的同学欢迎插眼关注。如果文章对你有帮助除了收藏之余可以点个赞 👍，**respect**。 ***本文正在参加[「金石计划」](https://juejin.cn/post/7207698564641996856/ "https://juejin.cn/post/7207698564641996856/")***