Question

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

export interface Contacts {
    name: string
    phone: number
}

const Body = ({ products, contacts }) => {
    return (
        <div>
            <span>hello</span>
        </div>
    )
}
export default Body

我希望产品prob的类型为ProductsDatum，而联系人props的类型为Contacts您将如何处理？

Answer 1

您需要为组件道具定义一个接口，该接口合并您正在使用的其他两种类型，并将它们分配给适当的道具。然后，您可以将该接口作为泛型传递给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>
    )
}

我发现this article对学习如何正确键入React组件很有帮助。同样，看起来products和/或contacts是一个数组，而不是像您在ProductsDatum / Contacts中定义的单个对象。如果确实如此，则需要将它们定义为Array<ProductsDatum>或ProductsDatum[]，以避免其他类型错误。

Answer 2

我通常使用Flow

type Props = {
 id: number,
 sku: string,
 name: string,
 price: number
};


function Body(props: Props) {
  // code...
}

反应钩子怎么办打字脚本多个道具

2 个答案: