TSX：对象的嵌套递归数组接口

Question

我无法使我的打字稿界面与react tsx组件一起使用。 我已经将所有项目放置在具有可能的子项目的对象数组中。

我尝试了许多不同的接口，但是总是以某种错误告终，目前只有map函数似乎无法与该接口一起使用。 （我是菜鸟，昨天第一次开始使用打字稿：P）

interface NavListItem {
  ID: string;
  title: string;
  path_url: string;
  child_items?: NavListProps;
}

interface NavListProps {
  items: { [index: number]: NavListItem };
}

const NavList: React.FC<NavListProps> = ({ items }) => {
  return items.map(item => (
    <li key={item.ID}>
      <Link to={item.path_url}>{item.title}</Link>
      {item.child_items ? (
        <ul>{<NavList items={item.child_items} />}</ul>
      ) : null}
    </li>
  ));
};

我的目标是没有错误，并且工作正常。我感谢所有帮助！

Answer 1

如果假设items是一个数组，则props的正确接口是：

interface NavListProps {
  items: NavListItem[];
}

正如您所定义的，items是具有任意键值对的对象，唯一的限制是键必须为数字，并且值必须为NavListItems。但是，这并不意味着它是一个数组，因此typescript指出该类型上没有map方法。

一些其他问题（如评论中所述）：

1）递归渲染NavList时，您传入的是item.child_items，但这被定义为单个NavListProps，而应改为NavListItem []：

interface NavListItem {
  ID: string;
  title: string;
  path_url: string;
  child_items?: NavListItem[];
}

2）您的组件仅返回一个数组，但应将其包装在Fragment中：

const NavList: React.FC<NavListProps> = ({ items }) => {
  return (
    <React.Fragment>
      {items.map(item => (
        <li key={item.ID}>
          <Link to={item.path_url}>{item.title}</Link>
          {item.child_items ? (
            <ul>{<NavList items={item.child_items} />}</ul>
          ) : null}
        </li>
      }
    </React.Fragment>
  ));
};

P.S .：如果您的构建设置正确，则可以将<></>作为<React.Fragment></React.Fragment>的简写