Sommaire

Les high-order components

Les composants de haut niveau, plus couramment appelés high-order components ou HOC, sont un moyen particulièrement élégant de créer des composants réutilisables. Le principe est simple : un HOC est une fonction qui prend en paramètre une définition de composant (classe ou fonction), et renvoie une nouvelle définition de composant, qui ajoute du comportement à la première. Il s’agit en fait du pattern Décorateur appliqué aux composants React. HOC

Vous en avez déjà utilisé sans même le savoir. La fonction connect de React-Redux est un HOC. En effet, en appelant connect(mapStateToProps), vous obtenez une fonction prenant un composant en paramètre (celui que vous avez défini à côté), et renvoyant un composant, connecté à Redux. Autres exemples : les fonctions withRouter de React Router (chapitre Gestion de formulaires et du routage), ou encore withNavigation de React Navigation (cf. chapitre Développer pour le mobile avec React Native). withRouter React Router withNavigation

Voici un exemple très simple de HOC :

const addBorder = borderWidth => Component => props => ( 
 <div style={{ 
   borderColor: ’black’, borderStyle: ’solid’, borderWidth 
 }}> 
   <Component {...props} /> 
 </div> 
) 
 
const MyText = <p>Hello!</p> 
  ...