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

function withLogger(WrappedComponent) {
  return function(props) {
    console.log('Rendering:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}
 
const EnhancedButton = withLogger(({ label }) => (
  <button>{label}</button>
));

react

Erklärung

function withLogger(WrappedComponent) {

Definiert eine Funktion, die eine Komponente als Argument akzeptiert.

return function(props) {

Gibt eine neue funktionale Komponente zurück, die die ursprüngliche umhüllt.

return <WrappedComponent {...props} />;

Reicht alle ursprünglichen Props an die umhüllte Komponente weiter.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Komponenten mit Higher-Order Components (HOC) erweitern

Verwandt