reactjs - ไม่มีการโอเวอร์โหลดตรงกับการเรียกนี้ Error บน TSX

ฉันเป็นมือใหม่ใน React และ TypeScript

ฉันส่ง propTypes เข้าไปใน styled-component และมันแสดงข้อผิดพลาดนี้ให้ฉันเห็น:

ไม่มีการโอเวอร์โหลดที่ตรงกับการเรียกนี้

โอเวอร์โหลด 1 จาก 2, '(props: { order: Order; client: Client; orderDetail: OrderDetails; confirmation: Confirmation; shipping: Shipping; payment: Payment; ... อีก 255; onTransitionEndCapture?: TransitionEventHandler<...>; } & { ...; } & { ...; }): ReactElement<...>', ให้ข้อผิดพลาดดังต่อไปนี้.

ประเภท '{ children: Element[]; }' ขาดคุณสมบัติดังต่อไปนี้จากประเภท '{ order: Order; client: Client; orderDetail: OrderDetails; confirmation: Confirmation; shipping: Shipping; payment: Payment; ... 255 รายการเพิ่มเติม ...; onTransitionEndCapture?: TransitionEventHandler<...>; }': order, client, orderDetail, confirmation, และอีก 2 รายการ

โอเวอร์โหลด 2 จาก 2, '(props: StyledComponentPropsWithAs<"div", any, OrderCardProps, never, "div", "div">): ReactElement<StyledComponentPropsWithAs<"div", any, OrderCardProps, never, "div", "div">, string | JSXElementConstructor<...>' ทำให้เกิดข้อผิดพลาดดังต่อไปนี้

ชนิด ' { children: Element[]; } ' ขาดคุณสมบัติที่ตามมาจากชนิด ' { order: Order; client: Client;....255 รายการเพิ่มเติม ...; onTransitionEndCapture?: TransitionEventHandler<...>; } ': order, client, orderDetail, confirmation และอีก 2 รายการ.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>

คำตอบ #1

ข้อความแสดงข้อผิดพลาดบอกว่าคุณเรียกใช้คอมโพเนนต์ <StatusLayout> ของคุณแต่ไม่มี props ที่จำเป็นซึ่งคุณประกาศไว้ในการกำหนดค่า const StatusLayout=styled.div<OrderCardProps>

ตัวอย่างเช่น คุณสามารถเรียกมันแบบนี้ได้:

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

อย่างที่ได้กล่าวมาแล้ว เนื่องจาก <StatusLayout> เป็นแค่ div ที่มีการตกแต่งด้วยสไตล์ prop เหล่านี้ทั้งหมดจึงสามารถใช้ได้เฉพาะในนิยามสไตล์เท่านั้น (เพราะ styled-components จะไม่ส่งต่อ prop เหล่านี้ไปยัง div) ซึ่งเป็นไปได้น้อย ดังนั้นจึงเป็นที่น่าสงสัยว่าคุณต้องการพวกมันทำไม