javascript / intermediate
Snippet
Logik-Sharing via Render Props
Das Render-Props-Muster beinhaltet das Übergeben einer Funktion als Prop an eine Komponente. Diese Funktion teilt der Komponente mit, was gerendert werden soll, wodurch zustandsbehaftete Logik (wie Maus-Tracking) geteilt werden kann, ohne die UI-Struktur fest zu verdrahten.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const MouseTracker = ({ render }) => {const [pos, setPos] = useState({ x: 0, y: 0 });const handleMove = (e) => setPos({ x: e.clientX, y: e.clientY });return (<div style={{ height: '100vh' }} onMouseMove={handleMove}>{render(pos)}</div>);};// Usage<MouseTracker render={({ x, y }) => (<h1>The mouse position is ({x}, {y})</h1>)} />
react
Erklärung
1
const MouseTracker = ({ render }) => {
Definiert eine Komponente, die eine Funktion namens 'render' als Prop erwartet.
2
{render(pos)}
Ruft die übergebene Funktion mit dem aktuellen internen State auf, um die Ausgabe zu bestimmen.