javascript / intermediate
Snippet
Logik-Wiederverwendung mit Higher-Order Components
Eine Higher-Order Component (HOC) ist ein Muster, bei dem eine Funktion eine Komponente entgegennimmt und eine neue, erweiterte Komponente zurückgibt. Dies ist nützlich für übergreifende Aufgaben wie Logging, Authentifizierung oder Datenbeschaffung.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
const withLogger = (WrappedComponent) => {return (props) => {useEffect(() => {console.log(`Component ${WrappedComponent.name} mounted`);}, []);return <WrappedComponent {...props} />;};};const EnhancedButton = withLogger(Button);
react
Erklärung
1
const withLogger = (WrappedComponent) => {
Eine Funktion, die eine Komponente als Argument akzeptiert.
2
return (props) => { ... }
Gibt eine neue Funktionskomponente zurück, die die ursprüngliche umschließt.
3
<WrappedComponent {...props} />
Rendert die ursprüngliche Komponente mit allen weitergereichten Props.