React+Typescript 嵌套对象数组props的interface正确定义方法

修正方案 #

你的问题确实出在数组类型声明缺失，共有两处需要调整：

1. IMyProps接口下的children字段是IChildren类型的数组，不是单个IChildren对象
2. 你提供的示例myProps本身是由多个结构一致的对象组成的数组，如果这是组件接收的完整props属性，需要额外声明对应的数组类型

修正后的完整类型定义

// 子菜单类型定义保持不变
export interface IChildren {
  name: string;
  href: string;
}

// 修正单条菜单配置项的类型定义
export interface IPropsItem {
  name: string;
  on: boolean;
  // 补充数组标记，声明为IChildren类型的数组
  children: IChildren[];
}

// 如果整个myProps是组件接收的属性（比如属性名为menuList），组件的props定义如下
export interface IMenuProps {
  menuList: IPropsItem[];
}

React组件使用参考

import React from 'react';

const Menu: React.FC<IMenuProps> = ({ menuList }) => {
  return (
    <div className="menu">
      {menuList.map(menu => (
        <div key={menu.name} className={menu.on ? 'active' : ''}>
          <span>{menu.name}</span>
          <div className="submenu">
            {menu.children.map(sub => (
              <a key={sub.name} href={sub.href}>{sub.name}</a>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

// 调用组件时直接传入示例的myProps即可
<Menu menuList={myProps} />

内容的提问来源于stack exchange，提问作者Leo Messi