如何使用React + TypeScript通过循环数组来渲染组件？

Question

我尝试循环遍历数组的项目，但在 TypeScript 中缺少组件的一些输入。我已经尝试过Card<any或Card<IProps>使用下面定义的接口（下面未使用）。

这是我到目前为止遇到的错误。

输入 '{ 键：数字；卡：{名称：字符串；图像：字符串；身份证号; }; }' 不可分配给类型 'IntrinsicAttributes & {children?: ReactNode; }'。属性“card”在类型“IntrinsicAttributes & {children?: ReactNode;”上不存在 }'。

我很想知道我在这里到底缺少什么？

const cards = [
  {
    name: "a",
    image: "red",
    id: 1
  },
  {
    name: "b",
    image: "blue",
    id: 2
  },
  {
    name: "c",
    image: "green",
    id: 3
  }
];

interface IProps {
  card: {
    name: string;
    image: string;
    id: number;
  };
  key: string;
}


...(Stateless component logic here)...

const renderCards = () => {
    return cards.map(card => {
      return <Card key={card.id} card={card} />;
    });
  };

  return (
    <div>

      <CardContainer>{renderCards()}</CardContainer>
    </div>
  );

Answer 1

我需要查看您的 Card 组件实现，但我猜测以下内容应该有所帮助\xc2\xa0：

\n\n

interface ICard {\n  name: string;\n  image: string;\n  id: number;\n}\n\ninterface IProps {\n  card: ICard;\n  key: string;\n}\n\nconst cards: ICard[] = [\n  {\n    name: "a",\n    image: "red",\n    id: 1,\n  },\n  {\n    name: "b",\n    image: "blue",\n    id: 2,\n  },\n  {\n    name: "c",\n    image: "green",\n    id: 3,\n  },\n];\n\nconst Card: React.FC<{ card: ICard }> = ({ card }) => {\n  return <div>{card.name}</div>;\n};\n\nconst renderCards = () => {\n  return cards.map(card => {\n    return <Card key={card.id} card={card} />;\n  });\n};\n\nreturn (\n  <div>\n    <CardContainer>{renderCards()}</CardContainer>\n  </div>\n);\n

\n