React Typescript 中的接口上不存在屬性

Question

我是 React 的新手，但之前有過一些 Angular 嘗試。

我實際上是在嘗試實現一個接受數據模型或對象作為參數的組件

看起來像這樣

import react from 'react'

interface SmbListItem{
    index:number;
    primary:string;
    secondary:string;
}
   

export default function SmbList({props}:SmbListItem){
    return(
        <>

        </>
    );
}

但是它的 saying 道具在 SmbListItem 上不存在

我做錯了什么？

在這種情況下，還要求對接口或類型提出建議是最好的選擇

Answer 1

import react from 'react'

interface SmbListItem{
    index:number;
    primary:string;
    secondary:string;
}
   

export default function SmbList({index, primary, secondary}:SmbListItem){
    return(
        <>

        </>
    );
}

您的Interface Props中沒有定義此類props

即使你不使用Ts並且你確定你props像這樣destructure你的props

export default function SmbList({index, primary, secondary}){
    return(
        <></>
    );
}

對於您的第二個問題，請查看類型與接口

Answer 2

嗨@Sandeep Thomas，

首先，您試圖destructure函數定義中的props參數，但您沒有將任何道具傳遞給函數。 在這種情況下，您需要在這種情況下使用generic type函數。

如果你是react-typescirpt世界的新手。 然后，您需要先閱讀此內容：- TypeScript Docs 。

簡而言之：-

泛型類型是一種允許您使用一個或多個占位符類型定義類型或函數的類型，這些占位符類型在使用泛型時可以用特定類型填充。

我找到了一個很好的例子：-

function identity<T>(arg: T): T {
  return arg;
}

let numberIdentity = identity(5);  // numberIdentity is of type number
let stringIdentity = identity("hello");  // stringIdentity is of type string

這是您的代碼示例：-

export default function SmbList<T extends SmbListItem>({ props }: T) {
    return <>// You code...</>;
}

props參數屬於擴展SmbListItem接口的類型。