【九月打卡】第13天 2022升级 React18+TS高仿AntD从零到一打造组件库

课程名称：2022升级 React18+TS高仿AntD从零到一打造组件库

课程章节： 第6章 更上一层楼 - 完成 Menu 组件

主讲老师：张轩

课程内容：

今天学习的内容包括：

6-5 测试驱动 - Menu 测试添加
6-6 日趋完美 - Menu 组件编码第三部分

课程收获：

Menu 为页面和功能提供导航的菜单列表。

导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

如何实现 menuItem不传 index

上述对 Menu 实现的要点如下:

1. 负责菜单布局：比如水平 (horizontal)，垂直 (vertical)，内嵌 (inline)
2. 菜单项 (MenuItem, SubMenu) 选中或点击的事件代理： 将 Menu 的 onClick 与 onSelect 事件回调作为 context 传递到子组件，在 MenuItem 或 SubMenu 的 click 事件中调用，达到一个类似于事件代理的效果
3. 菜单顶层 level = 1: Menu 作为最顶层组件，将 level 作为 context 传递到子组件，作为一个标的。SubMenu 自己的 context 中也有 level，值为父级 Level + 1。由于 MenuItem 是叶子节点，它的 level 即为父级 context.level + 1.
   注：在React中，如果父组件和祖先组件具有相同的 context 字段名，父组件会覆盖祖先组件。因此通过level 的层层自增，我们总能取得当前节点的 level 值。

实现关键在于从 Menu 或 SubMenu 组件传递的 context

点击 MenuItem 时同时触发 SubMenu 或 Menu 通过 context 传递来的 click 回调

mode 与 level 会影响 MenuItem 的展现，这也是为什么 mode 与 level 需要通过 context 传递过来。