antd menu

antd 源码分析

 

Menu Submenu MenuItem

Menu 为一个用例中最顶层组件——最顶端的容器

SubMenu 的父组件为 SubMenu 或 Menu——副标题作为副容器

MenuItem叶子节点——最底层

 

最简单的用法

来康康menu的目录结构

 

index.tsx=>menu组件

index聚合了副容器和叶子组件

ts语法 type menu自定义的一些属性，代表菜单栏不同的位置

很优雅的写法，menu仅仅只是一个入口，一目了然

当渲染menu组件的时候，把submenu和item赋值为menu的静态元素

MenuContext=>context透传所有props

MenuItem=>叶子组件

SubMenu=>副容器组件

依赖库

classnames

根据属性自动添加对应的class name（自己写对应的规则）

举个例子