目录

• 需求分析

需求分析

1. Menu组件分为横向、纵向，横向/纵向分为有下拉菜单栏的、没有下拉菜单栏的
2. 属性为active的菜单栏是高亮的，其余不高亮
3. 菜单项是可以被disabled，disabled会展示特殊样式，点击不会响应
4. 点击某一菜单项，可能会弹出下拉菜单栏

新建src/components/Menu/menu.tsx，代码如下：

import React, { FC, useState, createContext, CSSProperties } from 'react'
import classNames from 'classnames'

type MenuMode = 'horizontal' | 'vertical'
export interface MenuProps {
  /**默认 active 的菜单项的索引值 高亮的菜单项的索引值*/
  defaultIndex?: string;
  className?: string;
  /**菜单类型 横向或者纵向 */
  mode?: MenuMode;
  style?: CSSProperties;// CSSProperties内置的
  /**点击菜单项触发的回调函数 */
  onSelect?: (selectedIndex: string) => void;
}

export const Menu: FC<MenuProps> = (props) => {
  const { className, mode, style, children, defaultIndex, onSelect, defaultOpenSubMenus } = props
  const classes = classNames('viking-menu', className, {// 添加类名
    'menu-vertical': mode === 'vertical',
    'menu-horizontal': mode !== 'vertical',
  })
  
  return (
    <ul className={classes} style={style}>
      {children}
    </ul>
  )
}
Menu.defaultProps = {
  defaultIndex: '0',
  mode: 'horizontal',
  defaultOpenSubMenus: [],
}

export default Menu;