Sommaire

Les render props render props

Dans la section précédente, nous avons vu comment les high-order components pouvaient répondre au besoin de mutualiser de la logique commune à plusieurs composants. Dans certains cas d’utilisation, une manière alternative de répondre à ce besoin est d’utiliser des render props (terme qui ne trouve pas de traduction française satisfaisante).

Comme pour les HOC, le principe de base est très simple : donner à un composant une ou plusieurs propriétés qui sont des fonctions permettant de générer le rendu d’un composant. Voyons plus concrètement avec un exemple à quoi cela ressemble :

const ContactView = props => { 
 const { contact, renderPhone } = props 
 return ( 
   <div> 
     <span>{contact.name}</span> 
     <span>{renderPhone(contact.phone)}</span> 
   </div> 
 ) 
} 
ContactView.propTypes = { 
 contact: PropTypes.shape({ 
   name: PropTypes.string, 
   phone: PropTypes.string 
 }), 
 renderPhone: PropTypes.func 
} 
ContactView.defaultProps = { 
 renderPhone: phone => phone 
}

Ici, le composant ContactView ne fait qu’afficher le nom d’une personne et son numéro de téléphone, mais vous remarquerez qu’on a la possibilité de lui passer en propriété ...