В React Render Props — это метод, используемый для совместного использования логики между компонентами с помощью функции. Вместо использования дочерних элементов или композиции в качестве реквизита передается функция для динамического рендеринга контента. Этот подход хорошо работает с функциональными компонентами и хуками.

Вот пример реализации Render Props с функциональными компонентами:

Пример

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;

Объяснение:

• MouseTracker — это функциональный компонент, принимающий свойство рендеринга.
• Свойство render — это функция, которая получает положение мыши и возвращает JSX.
• Компонент App передает функцию в качестве свойства рендеринга, которая отображает координаты x и y мыши.

Этот шаблон обеспечивает большую гибкость при выборе способа отображения контента на основе логики внутри компонента MouseTracker.