javascript / beginner
Snippet
Übergeben von Callback-Funktionen über Child-Component-Props
Das Weitergeben von Callback-Funktionen an untergeordnete Komponenten über Props ermöglicht einen Aufwärtsfluss von Daten und Ereignissen in React. Die Kindkomponente löst die vom Elternteil übergebene Funktion bei DOM-Ereignissen aus.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { useState } from 'react';function ActionButton({ onCustomClick, label }) {return <button onClick={onCustomClick}>{label}</button>;}function ParentContainer() {const [count, setCount] = useState(0);const handleIncrement = () => {setCount(prev => prev + 1);};return (<div><p>Total Clicks: {count}</p><ActionButton onCustomClick={handleIncrement} label="Add Count" /></div>);}export default ParentContainer;
react
Erklärung
1
function ActionButton({ onCustomClick, label }) {
Definiert eine wiederverwendbare Kindkomponente, die eine Handler-Funktion 'onCustomClick' und ein 'label' als Props empfängt.
2
const handleIncrement = () => { setCount(prev => prev + 1); };
Definiert die Callback-Funktion im Elternteil, die den Zählerzustand erhöht.
3
<ActionButton onCustomClick={handleIncrement} label="Add Count" />
Übergibt die Funktionsreferenz des Elternteils an die entsprechende Prop der Kindkomponente.