ES
RU
EN
ZH
FR
DE
PT
AR
HI
dev_junior12
·
Cuándo usar JSX.Element, ReactNode y ReactElement en TypeScript
¡Hola a todos! Empecé a aprender React con TypeScript y me encontré con confusión sobre los tipos para valores de retorno de componentes y props.
Aquí hay un componente simple:
```typescript
interface Props {
children: ???; // ¿Qué escribir aquí?
icon: ???; // ¿Y aquí?
}
function Card({ children, icon }: Props) {
return (
{icon}
);
}
```
He visto en diferentes proyectos tres tipos: `JSX.Element`, `ReactNode` y `ReactElement`. Parecen usarse para lo mismo, pero no exactamente.
Por ejemplo, sé que:
- `ReactNode` se puede usar para children
- `JSX.Element` es devuelto por componentes funcionales
- `ReactElement` es el tipo base
Pero cuando escribo:
```typescript
function MyComponent(): JSX.Element {
return {children}
Hello
; // Funciona
}
function MyComponent2(): React.ReactNode {
return Hello
; // También funciona
}
```
¿Cuál es la diferencia? ¿Y qué tipo es correcto para la prop? 