React18学习笔记47：基础架构搭建——menu.tsx实战案例

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
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.