菜单组件TS写法

采用函数式组件的方式，vs快捷键输入ts，选择tsrfc生成函数式组件的模板如下

import React, { ReactElement } from 'react'

interface Props {
    //此处写props的参数，及参数的类型
}

export default function ProductionOrder({//这里是props的入参}: Props): ReactElement {
    return (
        <div>
            
        </div>
    )
}

定义数据类型

export interface menuInterface {
  children?: menuInterface[]; 
  id: string; // 菜单id
  hidden?: boolean; // 是否隐藏
  icon?: string;  // 菜单图标
  name: string;  // 菜单名称
  url: string; // 菜单url
}

渲染菜单组件方法

  const renderMenu = (menus: menuInterface[]) => {
    return menus.map((menu: menuInterface) => {
      if (menu.children && menu.children.length > 0) {
        return (
          <SubMenu
            key={menu.id}
            style={{ display: menu.hidden ? 'none' : 'block' }}
            title={
              <span>
                {menu.icon && <Icon type={menu.icon} />}
                <span>
                  <span className="menu-text">{menu.name}</span>
                </span>
              </span>
            }
            // onTitleClick={onTitleClick(this)}
          >
            {renderMenu(menu.children)}
          </SubMenu>
        );
      }
      return (
        <Menu.Item
          key={menu.id}
          style={{ display: menu.hidden ? 'none' : 'block' }}
        >
          <Link
            to={{
              pathname: menu.url,
              state: { action: 'RESET' },
            }}
          >
            {menu.icon && <Icon type={menu.icon} />}
            <span className="menu-text">{menu.name}</span>
          </Link>
        </Menu.Item>
      );
    });
  };

render中的方法

<Sider
      collapsible
      collapsedWidth={80}
      breakpoint="sm"
      width={200}
      collapsed={collapsed}
      onCollapse={setCollapsed}
    >
      <Menu
        style={{ overflowY: 'auto' }}
        mode="inline"
        theme="dark"
        inlineIndent={20}
      >
        {renderMenu(menuData)}
      </Menu>
    </Sider>