Ionic React 向子组件发送 Object 道具

Question

我只是不明白。 我对 Typescript 有点陌生，但习惯于在 React.js 中编码。 我有一个简单的组件

const Tab1: React.FC = () => {

  const [spices, setSpices] = useState(
    [
      {
        Gewuerz: "pepper",
        Gramm: 50,
      },
      {
        Gewuerz: "Tumeric",
        Gramm: 870,
      },
      {
        Gewuerz: "salt",
        Gramm: 40,
      },
      {
        Gewuerz: "muscat",
        Gramm: 9,
      }
    ]);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle class="ion-text-center">Spices</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <SpiceList spices={spices}/>
      </IonContent>
      

    </IonPage>

    
  );
};

还有一个子组件

interface Props {
   spices: Object[];
 }




const SpiceList: React.FC<Props> = ({spices}: Props) => {

  return (

      <IonContent>
        <IonList>
          {spices.map((e) => <IonItem>{e.Gewuerz}</IonItem>)}
        </IonList>
      </IonContent>
   
    
  )
      
};

export default SpiceList;

我想将 Prop 中的不同香料渲染为列表。 我可以 Map 道具香料。 但我无法访问e.Gewuerz ，因为它说它在e内部不可用。 那么我怎样才能访问香料的子元素呢？

编辑：所以它实际上就像我尝试过的那样工作。 但它总是说“编译时出错”。 如果我解雇它，应用程序会像我想要的那样呈现。

Answer 1

像object这样的模糊类型没有任何已知属性，因此 Typescript 不会让您访问它的任何属性。

您的香料都是特定类型的{ Gewuerz: string; Gramm: number; } { Gewuerz: string; Gramm: number; } { Gewuerz: string; Gramm: number; }所以你需要使用该类型来获取任何有用的类型信息。

您可以按原样使用该类型：

interface Props {
  spices: { Gewuerz: string; Gramm: number; }[];
}

但是您可能想要创建一个命名类型别名。 特别是如果这个Spice object 是您在整个应用程序中使用的东西。

interface Spice {
  Gewuerz: string;
  Gramm: number;
}

interface Props {
  spices: Spice[];
}

请注意，您不需要使用React.FC<Props>和({spices}: Props) 。 你只需要一个或另一个。