我是 React 和 TypeScript 的新手。
我將 propTypes 傳遞給樣式組件，它向我顯示了這個錯誤：
沒有過載匹配此呼叫。
Overload 1 of 2, '(props: { order: Order; client: Client; orderDetail: OrderDetails; Confirmation: Confirmation; shipping: Shipping; payment: Payment; ... 255 more ...; onTransitionEndCapture?: TransitionEventHandler<.. .>; } & { ...; } & { ...; }): ReactElement<...>'，給出了以下錯誤。
輸入'{孩子：元素[]; }' 缺少型別 '{ order: Order; 中的以下屬性 客戶：客戶；orderDetail：訂單詳情；確認：確認；航運：航運；付款：付款；……還有 255 個……；onTransitionEndCapture?: TransitionEventHandler<...>; }': 訂單、客戶、訂單詳情、確認等 2 個。
多載 2 of 2, '(props: StyledComponentPropsWithAs<"div", any, OrderCardProps, never, "div", "div">): ReactElement<StyledComponentPropsWithAs<"div", any, OrderCardProps, never, "div", " div">, 字串 | JSXElementConstructor<...>>'，給出了以下錯誤。
輸入'{孩子：元素[]; }' 缺少型別 '{ order: Order; 中的以下屬性 客戶：客戶；....255 更多...；onTransitionEndCapture?: TransitionEventHandler<...>; }': order, client, orderDetail,confirmation, and 2 more.ts(2769)
樣式.ts
export const StatusLayout = styled.div<OrderCardProps>`
display: flex;
> div {
width: 40px;
height: 40px;
margin: auto 2px;
組件.tsx
export interface OrderCardProps {
order: Order
client: Client
orderDetail: OrderDetails
confirmation: Confirmation
shipping: Shipping
payment: Payment
}
export const OrderCard: React.FC<OrderCardProps> = ({ order, ...}) => { return ( ....
...
...
<StatusLayout>
<div>
<Icon size={"l"} color={colors.blueDark3} children={<MdPermPhoneMsg/>}/>
</div>
錯誤在 <StatusLayout>
uj5u.com熱心網友回復：
錯誤訊息說您呼叫了<StatusLayout>組件，但沒有在其定義中宣告的必需道具const StatusLayout = styled.div<OrderCardProps>
例如，你可以這樣稱呼它：
<StatusLayout
order={myOrder}
client={someClient}
orderDetail={myOrderDetail}
confirmation={someConfirmation}
shipping={theShipping}
payment={andThePayment}
>
// children...
</StatusLayout>
話雖如此，由于<StatusLayout>只是一個樣式化的 div，所有這些 props 只能在樣式定義中使用（因為 styled-components 不會將它們傳遞給 div），這不太可能，所以你為什么需要它們是值得懷疑的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/399850.html
標籤：反应 打字稿 样式组件 react-proptypes