En React, Render Props es una técnica utilizada para compartir lógica entre componentes utilizando una función de prop. En lugar de utilizar elementos secundarios o composición, se pasa una función como accesorio para representar el contenido de forma dinámica. Este enfoque funciona bien con componentes y ganchos funcionales.

Aquí hay un ejemplo de cómo implementar Render Props con componentes funcionales:

Ejemplo

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;

Explicación:

• MouseTracker es un componente funcional que requiere un accesorio de renderizado.
• La propiedad de renderizado es una función que recibe la posición del mouse y devuelve JSX.
• El componente de la aplicación pasa una función como accesorio de renderizado, que muestra las coordenadas xey del mouse.

Este patrón permite una mayor flexibilidad a la hora de decidir cómo representar el contenido basándose en la lógica dentro del componente MouseTracker.