没有过载匹配此调用 TSX 上的错误

Question

我是 React 和 TypeScript 的新手。

我将 propTypes 传递到样式组件中，它向我显示了这个错误：

No overload matches this call.

Overload 1 of 2, '(props: { order: Order; client: Client; orderDetail: OrderDetails; confirmation: Confirmation; shipping: Shipping; payment: Payment; ... 255 more ...; onTransitionEndCapture?: TransitionEventHandler<...>; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.

Type '{ children: Element[]; }' is missing the following properties from type '{ order: Order; client: Client; orderDetail: OrderDetails; confirmation: Confirmation; shipping: Shipping; payment: Payment; ... 255 more ...; onTransitionEndCapture?: TransitionEventHandler<...>; }': order, client, orderDetail, confirmation, and 2 more.

Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", any, OrderCardProps, never, "div", "div">): ReactElement<StyledComponentPropsWithAs<"div", any, OrderCardProps, never, "div", "div">, string | JSXElementConstructor<...>>', gave the following error.

Type '{ children: Element[]; }' is missing the following properties from type '{ order: Order; client: Client;....255 more ...; onTransitionEndCapture?: TransitionEventHandler<...>; }': order, client, orderDetail, confirmation, and 2 more.ts(2769)

styles.ts

export const StatusLayout = styled.div<OrderCardProps>`
display: flex;
> div {
    width: 40px;
    height: 40px;
    margin: auto 2px;

componant.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>

Answer 1

错误消息说您调用了 <StatusLayout> 组件，但没有在其定义中声明的强制属性 const StatusLayout = styled.div<OrderCardProps>

例如，您可以这样称呼它：

<StatusLayout
  order={myOrder}
  client={someClient}
  orderDetail={myOrderDetail}
  confirmation={someConfirmation}
  shipping={theShipping}
  payment={andThePayment}
>
  // children...
</StatusLayout>

也就是说，由于 <StatusLayout> 只是一个样式 div，所有这些道具只能在样式定义中使用（因为样式组件不会将它们传递给 div)，这不太可能，所以你为什么需要它们值得怀疑。

没有过载匹配此调用 TSX 上的错误

No overload matches this call Error on TSX

typescript

reactjs

react-proptypes

styled-components