javascript / beginner
Snippet
Übergabe von Event-Handler-Callbacks an Unterkomponenten
In React übergeben Elternkomponenten Funktionen über Props an Kindkomponenten. Dadurch können Kindkomponenten Ereignisse an die Elternkomponente zurückmelden, ohne deren Status direkt kennen oder verwalten zu müssen.
snippet.js
javascript
1
2
3
4
5
6
7
8
function ActionButton({ onTrigger, label }) {return <button onClick={onTrigger}>{label}</button>;}function Dashboard() {const notifyUser = () => console.log('Action triggered!');return <ActionButton onTrigger={notifyUser} label="Confirm" />;}
react
Erklärung
1
function ActionButton({ onTrigger, label }) {
Definiert eine Kindkomponente, die eine Callback-Funktion und ein Label aus den Props entpackt.
2
return <button onClick={onTrigger}>{label}</button>;
Verknüpft die übergebene Callback-Funktion direkt mit dem nativen onClick-Event des Buttons.
3
const notifyUser = () => console.log('Action triggered!');
Erstellt eine Event-Handler-Funktion innerhalb der übergeordneten Elternkomponente.
4
return <ActionButton onTrigger={notifyUser} label="Confirm" />;
Rendert die Kindkomponente und übergibt die Funktionsreferenz über die onTrigger-Prop.