Dans React, Render Props est une technique utilisée pour partager la logique entre les composants à l'aide d'un accessoire de fonction. Au lieu d'utiliser des enfants ou une composition, une fonction est passée comme accessoire pour restituer le contenu de manière dynamique. Cette approche fonctionne bien avec les composants fonctionnels et les hooks.

Voici un exemple de la façon d'implémenter des accessoires de rendu avec des composants fonctionnels :

Exemple

import React, { useState } from 'react';

// The component using render props
const MouseTracker = ({ render }) => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setMousePosition({
      x: event.clientX,
      y: event.clientY,
    });
  };

  return (
    

      {render(mousePosition)}
    
  );
};

// Component that consumes the render props
const App = () => {
  return (
    

      
Mouse Tracker
       (
        
Mouse Position: {x}, {y}
      )}/>
    
  );
};

export default App;

Explication:

• MouseTracker est un composant fonctionnel qui prend un accessoire de rendu.
• Le render prop est une fonction qui reçoit la position de la souris et renvoie JSX.
• Le composant App transmet une fonction comme accessoire de rendu, qui affiche les coordonnées x et y de la souris.

Ce modèle offre plus de flexibilité pour décider comment restituer le contenu en fonction de la logique à l'intérieur du composant MouseTracker.