如何使用 Typescript/React 传递类的对象

Question

我想要设置一个具有各种属性的项目数组，作为我的组件上的 Prop。

我正在尝试将具有不同属性的项目数组传递给组件，因此，假设这是我的对象数组：

`  let recepies = [
    {
      name: "A Name",
      imageURL: "V",
      difficulty: "C",
      time: 12,
      categories: "c",
    },
    {
      name: "aa",
      imageURL: "bb",
      difficulty: "cc",
      tieme: 13,
      categories: "c",
    }]
`

当我到达我的组件时，如何定义道具？ 我猜到了

`interface Props {
    recepies: Object[];}

`应该可以，但是当我到达时：

    return(recepies.forEach(function (recipe) {

<RecepieCard
      name={recipe.namme}

我知道该对象上不存在该属性。我该怎么做呢？

Answer 1

你应该像这样定义并分配类型给你的对象

type TRecepies = {
  name: string;
  imageURL: string;
  difficulty: string;
  time: number
  categories: string;
}

let recepies: TRecepies[] = [
{
  name: "A Name",
  imageURL: "V",
  difficulty: "C",
  time: 12,
  categories: "c",
},
{
  name: "aa",
  imageURL: "bb",
  difficulty: "cc",
  tieme: 13,
  categories: "c",
}]

并分配你的对象

interface IProps {
 recepies: TRecepies[];
}

然后在您的组件上使用它们，并小心输入对象的正确属性

return(recepies.forEach(function (recipe) {
<RecepieCard
  name={recipe.name}

不叫名字