0

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

我尝试了很多不同的界面，但总是以某种错误告终，目前只有地图功能似乎不适用于界面。（我是菜鸟，昨天第一次开始使用打字稿：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>
  ));
};

我的目标是没有错误和工作组件。我感谢所有的帮助！

4

1 回答 1

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>
  ));
};

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

于 2019-07-13T17:41:20.840 回答