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接口的类型。