In React ist Render Props eine Technik, die verwendet wird, um Logik zwischen Komponenten mithilfe einer Funktionsstütze zu teilen. Anstatt untergeordnete Elemente oder Kompositionen zu verwenden, wird eine Funktion als Requisite übergeben, um Inhalte dynamisch darzustellen. Dieser Ansatz funktioniert gut mit Funktionskomponenten und Hooks.

Hier ist ein Beispiel für die Implementierung von Render Props mit funktionalen Komponenten:

Beispiel

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;

Erläuterung:

• MouseTracker ist eine funktionale Komponente, die eine Render-Requisite annimmt.
• Die Render-Requisite ist eine Funktion, die die Mausposition empfängt und JSX zurückgibt.
• Die App-Komponente übergibt eine Funktion als Render-Requisite, die die X- und Y-Koordinaten der Maus anzeigt.

Dieses Muster ermöglicht mehr Flexibilität bei der Entscheidung, wie Inhalte basierend auf der Logik innerhalb der MouseTracker-Komponente gerendert werden.