antd menu

antd 源码分析

antd menu

 

Menu Submenu MenuItem

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

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

MenuItem叶子节点——最底层

 

最简单的用法

antd menu

来康康menu的目录结构

 

antd menu

index.tsx=>menu组件

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

antd menu

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

antd menu

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

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

MenuContext=>context透传所有props

antd menu

MenuItem=>叶子组件

SubMenu=>副容器组件


依赖库

classnames

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

antd menu

举个例子

antd menu

antd menu

antd menu