react18-学习笔记47-基础架构-menu.tsx

最新推荐文章于 2024-08-04 20:37:24 发布

前端歌谣

最新推荐文章于 2024-08-04 20:37:24 发布

阅读量196

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/qq_41632427/article/details/126631155

版权

前端-jira管理系统专栏收录该内容

101 篇文章 3 订阅

订阅专栏

import React from "react"

import classNames from 'classnames'
type MenuMode = 'horizontal' | 'vertical'
export interface MenuProps {
    /**默认 active 的菜单项的索引值 */
    defaultIndex?: string;
    className?: string;
    /**菜单类型 横向或者纵向 */
    mode?: MenuMode;
    style?: React.CSSProperties;
    /**点击菜单项触发的回掉函数 */
    onSelect?: (selectedIndex: string) => void;
    children?:any;
  }

  export const Menu: React.FC<MenuProps> = (props) => {
    const { className, mode, style, children, defaultIndex } = props
    const classes = classNames('viking-menu', className, {
      'menu-vertical': mode === 'vertical',
      'menu-horizontal': mode !== 'vertical',
    })
   
    return (
      <ul className={classes} style={style} data-testid="test-menu">
        {children}
      </ul>
    )
  }

  Menu.defaultProps = {
    defaultIndex: '0',
    mode: 'horizontal',
    
  }

  export default Menu