Oups ! Il semble que nous ayons raté notre promesse de vous proposer un article chaque vendredi ! Nous en sommes désolés. Voici donc un article en retard !

Par la même occasion, il peut être intéressant de noter que nos bureaux seront fermés du 23 décembre au 2 janvier, inclusivement. En conséquence, nous ne publierons pas d’article le 29 décembre prochain. Nous espérons que vous passerez de joyeuses fêtes !

Bon, commençons ! Cette semaine, nous verrons rapidement de quelles façons vous pouvez utiliser vos composants React comme paramètres de fonctions, en dehors du rendu.

En effet, si l’utilisation la plus commune des composants reste le rendu, il ne faut pas oublier qu’il s’agit quand même de données, et comme toutes autres données, les composants peuvent être envoyés à une fonction ou une autre, pour plusieurs raisons.

Nous allons voir deux types qui permettent d’utiliser vos composants React, soit Node et ComponentType.

Si vous n’utilisez pas de système de type avec votre JavaScript, vous n’avez peut-être jamais vu ces types encore, mais ils vous seront certainement familiers si vous avec l’habitude d’utiliser TypeScript ou Flow dans votre code, tout particulièrement le type Node.

En effet, si vous avez déjà passé un « children » à un composant, vous avez déjà utilisé le type Node.

Il est important de bien faire la distinction entre les deux, mais commençons par regarder un exemple du type Node :

Dans cet exemple, on cherche à créer une enveloppe pour notre composant, ce qui permettra de simplifier des tâches comme l’association à un « Provider », ainsi que le rendu sur un élément particulier. Puisque nous n’avions rien à faire de particulier à notre composant, il était ici plus simple d’utilise le type Node. On notera qu’ici, c’est la fonction qui appelle qui doit « créer » le composant (à l’aide de la syntaxe JSX, si vous l’utilisez), et non la fonction appelée. Dans la fonction appelée, on ne fait que passer le Node directement à un autre élément, comme children.

Le type Node a lui-même plusieurs fonctions et propriétés, mais il reste très simple à utiliser si vous n’en avez pas besoin !

Montre les propriétés d'un type Node

Montre une liste partielle des fonctions et propriétés existantes sur un élément de type Node.

Si vous souhaitez avoir un peu plus de flexibilité sur le composant qui vous est fourni comme paramètre, vous aurez sans doute à utiliser l’autre type mentionné plus haut, soit le ComponentType<Props>. Son cas d’utilisation typique est de s’en servir comme type de paramètre de composants de haut niveau (« higher order component »). C’est le type que vous utiliserez, par exemple, si vous souhaitez ajouter des propriétés à un élément quelconque.

Cela dit, on peut aussi l’utiliser pour réduire la quantité de code nécessaire pour une liste d’éléments similaires, par exemple ! Voici ce que ça peut donner :

De cette façon, vous pouvez vous créer des fonctions qui vous permettent de réduire et de plus facilement réutiliser du code !

J’ai volontairement choisi des exemples moins typiques que les « children » pour Node et les « property mapper » pour ComponentType, même s’ils sont sans doute les cas les plus évidents et fréquents. En effet, je pense que c’est sans doute une bonne chose que de se familiariser avec d’autres façons dont on peut utiliser ces fonctionnalités !

Comme nous avons manqué notre publication vendredi dernier, notre prochain article arrivera plus vite que d’habitude. À vendredi, donc !