ReactNode vs JSX.Element : celui que tu DOIS choisir.

Summary

Dans cette vidéo, l'intervenant explique la différence entre `JSX.Element` et `React.Node` en React avec TypeScript. Il montre comment `JSX.Element` est un type plus restreint qui n'accepte que des éléments JSX, tandis que `React.Node` est plus flexible, acceptant des chaînes de caractères, des nombres, des valeurs nulles et des tableaux en plus des éléments JSX. À travers un exemple de code, il démontre comment ces types influencent la typification des props dans un composant React, offrant ainsi une meilleure compréhension de la gestion des types dans les projets React avec TypeScript.

Takeaways

• 😀 `React.Element` est un type spécifique utilisé pour représenter des éléments JSX, comme des balises HTML dans React.
• 😀 `React.Node` est un type plus général qui accepte une variété de types, y compris des éléments JSX, des chaînes de caractères, des nombres et d'autres types primitifs.
• 😀 Lors de la définition de types de props dans un composant React, utiliser `React.Element` restreint l'acceptation à uniquement des balises JSX.
• 😀 Utiliser `React.Node` permet d'accepter un éventail plus large de types de valeurs, y compris les chaînes de caractères et les nombres, tout en restant compatible avec les éléments JSX.
• 😀 Lorsque vous tapez un prop avec `React.Element` et que vous tentez de passer une chaîne de caractères, une erreur se produit, car `React.Element` ne supporte que les balises JSX.
• 😀 Si vous tapez un prop avec `React.Node`, il accepte aussi bien des éléments JSX que des types primitifs comme les chaînes de caractères et les nombres.
• 😀 L'exemple donné montre un composant `Card` avec un prop `cartContent`, qui peut être typé comme `React.Element` ou `React.Node` selon la flexibilité nécessaire pour les types de valeurs.
• 😀 Le type `React.Node` est plus adapté lorsque vous voulez permettre une plus grande diversité de valeurs dans un composant, ce qui peut être crucial dans des projets plus complexes.
• 😀 En TypeScript avec React, il est préférable d'utiliser `React.Node` lorsque vous ne voulez pas vous limiter à des éléments JSX, surtout lorsque vous travaillez avec des données qui peuvent être de types variés.
• 😀 L'exemple montre également qu'un composant React peut accepter différents types de valeurs selon la manière dont ses props sont typés, ce qui affecte la façon dont les composants interagissent et sont rendus.

Q & A

Quelle est la différence principale entre JSX.Element et React.Node ?

La principale différence réside dans le fait que JSX.Element est un type spécifique qui représente uniquement des éléments JSX, c'est-à-dire des composants React ou des balises HTML. En revanche, React.Node est un type plus large qui inclut JSX.Element, mais aussi des chaînes de caractères, des nombres, des booléens, des tableaux, null et undefined.

Est-ce que JSX.Element peut accepter d'autres types que des éléments JSX ?

Non, JSX.Element ne peut accepter que des éléments JSX (comme des balises React ou HTML). Il est plus restrictif que React.Node, qui permet de travailler avec une variété de types supplémentaires.

Dans quel cas utiliser React.Node plutôt que JSX.Element ?

React.Node doit être utilisé lorsque vous voulez un type plus flexible, capable d'accepter différents types de valeurs comme des chaînes de caractères, des nombres, des booléens, des tableaux, et même null ou undefined, en plus des éléments JSX.

Quelles sont les conséquences d’utiliser JSX.Element dans un type de prop au lieu de React.Node ?

En utilisant JSX.Element, vous limitez le type de la prop à des éléments JSX uniquement. Par exemple, vous ne pourrez pas passer une chaîne de caractères ou un nombre. Cela peut rendre votre code plus restrictif si vous avez besoin de plus de flexibilité.

Pourquoi est-ce que l’erreur survient quand on passe une chaîne de caractères à une prop typée JSX.Element ?

L'erreur survient car JSX.Element ne peut accepter que des éléments JSX. Une chaîne de caractères n'est pas considérée comme un élément JSX, ce qui cause un conflit de types.

Que se passe-t-il si on remplace JSX.Element par React.Node dans le code ?

Si vous remplacez JSX.Element par React.Node, votre prop devient plus flexible et accepte des types variés comme des chaînes de caractères, des nombres, des tableaux, ou même null, sans provoquer d'erreur.

Qu’est-ce qu’un exemple typique de code utilisant JSX.Element et React.Node ?

Un exemple serait un composant où la prop `cardContent` peut être soit un élément JSX (par exemple une balise `<h1>`) soit un texte simple. Si vous utilisez JSX.Element, seul un élément JSX serait valide, mais avec React.Node, vous pourriez aussi passer un texte ou un nombre.

Comment déterminer si je dois utiliser JSX.Element ou React.Node dans mes projets React ?

Si vous savez que la prop ou le retour de votre composant ne contiendra que des éléments JSX (comme des balises React), utilisez JSX.Element. Si vous voulez permettre une variété de types (comme des chaînes de caractères, des nombres, etc.), optez pour React.Node.

Quels sont les avantages de comprendre la différence entre JSX.Element et React.Node ?

Comprendre cette différence permet d'écrire du code plus précis et flexible, en choisissant le type qui convient le mieux à vos besoins. Cela aide également à éviter les erreurs de typage dans TypeScript, en particulier lors de la manipulation de composants React.

Est-ce que l'utilisation de React.Node augmente la complexité du typage dans un projet React ?

Non, l'utilisation de React.Node ne complique pas nécessairement le typage. Au contraire, elle rend le code plus flexible et moins restrictif, ce qui est bénéfique si vous devez accepter plusieurs types de valeurs dans vos composants React.