javascript / intermediate
Snippet
Komponenten mit Higher-Order Components (HOC) erweitern
Ein Higher-Order Component ist ein Muster, bei dem eine Funktion eine Komponente entgegennimmt und eine neue Komponente mit zusätzlichen Funktionen wie Logging, Berechtigungen oder Datenabruf zurückgibt.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
function withLogger(WrappedComponent) {return function(props) {console.log('Rendering:', WrappedComponent.name);return <WrappedComponent {...props} />;};}const EnhancedButton = withLogger(({ label }) => (<button>{label}</button>));
react
Erklärung
1
function withLogger(WrappedComponent) {
Definiert eine Funktion, die eine Komponente als Argument akzeptiert.
2
return function(props) {
Gibt eine neue funktionale Komponente zurück, die die ursprüngliche umhüllt.
3
return <WrappedComponent {...props} />;
Reicht alle ursprünglichen Props an die umhüllte Komponente weiter.