javascript / intermediate
Snippet
Logik-Sharing mit Render Props
Das Render Props-Muster beinhaltet das Übergeben einer Funktion als Prop an eine Komponente. Die Komponente nutzt diese Funktion, um zu entscheiden, was gerendert werden soll, wodurch zustandsabhängige Logik geteilt wird.
snippet.js
1
2
3
4
5
6
7
8
9
const MouseTracker = ({ render }) => {const [position, setPosition] = useState({ x: 0, y: 0 });const handleMove = (e) => setPosition({ x: e.clientX, y: e.clientY });return <div onMouseMove={handleMove}>{render(position)}</div>;};// Usage<MouseTracker render={({ x, y }) => <h1>Mouse is at {x}, {y}</h1>} />
react
Erklärung
1
const MouseTracker = ({ render }) => {
Akzeptiert eine 'render'-Funktion als Eigenschaft.
2
return <div onMouseMove={handleMove}>{render(position)}</div>;
Ruft die Render-Funktion mit dem internen Zustand auf, um die UI anzuzeigen.