Reactjs 反应钩子如何做类型脚本多道具 导出接口产品数据{ 身份证号码 sku:字符串 名称：string 价格：号码 } 导出接口联系人{ 名称：string 电话号码 } const Body=（{products，contacts}）=>{ 返回( 你好 ) } 导出默认主体

我希望产品prob的类型为

ProductsDatum

，而contacts prop的类型为

contacts

你会怎么做？

我通常使用

---

您需要为组件道具定义一个接口，该接口包含您正在使用的其他两种类型，并将它们分配给适当的道具。然后，您可以将该接口作为泛型传递给React功能组件的

FunctionComponent

类型：

export interface ProductsDatum {
    id: number
    sku: string
    name: string
    price: number
}

export interface Contact {
    name: string
    phone: number
}

interface BodyProps {
    products: ProductsDatum[];
    contacts: Contact[];
}

const Body: FunctionComponent<BodyProps> = ({ products, contacts }) => {
    return (
        <div>
            <span>hello</span>
        </div>
    )
}

导出接口产品数据{
身份证号码
sku:字符串
名称：string
价格：号码
}
导出接口联系人{
名称：string
电话号码
}
接口车身支柱{
产品:ProductsDatum[];；
联系人：联系人[]；
}
const Body:FunctionComponent=（{products，contacts}）=>{
返回(
你好
)
}

---

我发现这有助于学习如何正确地键入React组件。另外，它看起来像

产品

和/或

联系人

是一个数组，而不是像您在

产品数据

/

联系人

中定义的单个对象。如果确实是这样，您需要将它们定义为

Array

或

ProductsDatum[]

，以避免额外的类型错误。

不熟悉typescript，但从概念上讲，您只需要将道具注释到接口（type）（

yourProp:yourType

），因此应该是

interface-ProductsDatum{…

并用

const Body=（{products:ProductsDatum

，…不，这样不行。在这种情况下，没有更新我的答案以使用括号形式。还使

联系人

语义为单数。干杯！

export interface ProductsDatum {
    id: number
    sku: string
    name: string
    price: number
}

export interface Contact {
    name: string
    phone: number
}

interface BodyProps {
    products: ProductsDatum[];
    contacts: Contact[];
}

const Body: FunctionComponent<BodyProps> = ({ products, contacts }) => {
    return (
        <div>
            <span>hello</span>
        </div>
    )
}