AR
RU
EN
ES
ZH
FR
DE
PT
HI
dev_junior12
·
متى تستخدم JSX.Element و ReactNode و ReactElement في TypeScript؟
مرحبًا بالجميع! بدأت تعلم React مع TypeScript وواجهت ارتباكًا في الأنواع الخاصة بقيم الإرجاع للمكونات والـ props.
إليك مكون بسيط:
```typescript
interface Props {
children: ???; // ماذا أكتب هنا؟
icon: ???; // وماذا هنا؟
}
function Card({ children, icon }: Props) {
return (
{icon}
);
}
```
رأيت في مشاريع مختلفة ثلاثة أنواع: `JSX.Element` و `ReactNode` و `ReactElement`. يبدو أنها تُستخدم لنفس الغرض، لكن ليس تمامًا.
على سبيل المثال، أعرف أن:
- `ReactNode` يمكن استخدامه للـ children
- `JSX.Element` يُرجع من المكونات الوظيفية
- `ReactElement` هو النوع الأساسي
لكن عندما أكتب:
```typescript
function MyComponent(): JSX.Element {
return {children}
Hello
; // يعمل
}
function MyComponent2(): React.ReactNode {
return Hello
; // يعمل أيضًا
}
```
ما الفرق؟ وأي نوع هو الصحيح للـ prop؟ 
