Avatar ·

ما هو نوع البيانات الخاص بـ prop children في React مع TypeScript؟

مرحبًا بالجميع! لقد بدأت للتو في تعلم React مع TypeScript، وواجهت مشكلة في تحديد نوع prop `children`. لدي مكون غلاف بسيط: ```tsx interface CardProps { title: string; children: ???; // ماذا أكتب هنا؟ } function Card({ title, children }: CardProps) { return (

{title}

{children}
); } ``` أريد أن يتمكن هذا المكون من قبول: 1. نص بسيط (string) 2. مكون React آخر 3. عدة مكونات مغلفة في fragment 4. أي عناصر JSX (div, span, img، إلخ) 5. حتى null أو undefined (إذا لم يتم تمرير children) في JavaScript كنت أكتب `children: any`، لكن في TypeScript يعتبر هذا ممارسة سيئة. جربت استخدام `ReactNode` و `ReactElement` و `JSX.Element`، لكني ارتبكت في الفروقات. عندما أكتب `children: React.ReactNode`، يشتكي TypeScript من أنني لم أقم باستيراد React.