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

Question

我无法让我的 typescript 界面与 react tsx 组件一起工作。我已将所有项目放入一个对象数组中，其中可能包含子项目。

我尝试了很多不同的界面，但总是以某种错误告终，目前只有地图功能似乎无法与界面一起使用。（我是菜鸟，昨天第一次开始使用 typescript :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。但这并不意味着它是一个数组，所以打字稿指出该类型没有 map 方法。

几个附加问题（如评论中所述）：

1) 当你递归渲染 NavList 时，你传入 item.child_items，但它被定义为单个 NavListProps，而它应该是 NavListItem[]:

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

2) 你的组件只返回一个数组，但它应该被包裹在一个片段中：

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.: 如果您的构建设置正确，则可以 <></> as shorthand for <React.Fragment></React.Fragment>

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

TSX: Nested recursive Array of objects interface

components

typescript

reactjs

create-react-app

react-tsx