javascript / expert
Snippet
Ref-Forwarding in Higher-Order Components (HOCs)
Beim Wrapping einer Komponente in einer HOC wird die 'ref'-Eigenschaft nicht automatisch weitergegeben, da sie ein reservierter Prop wie 'key' ist. Durch die Verwendung von 'forwardRef' stellen Sie sicher, dass die Elternkomponente weiterhin auf den zugrunde liegenden DOM-Knoten oder die Komponenteninstanz des umhüllten Elements zugreifen kann, wodurch die erwartete API erhalten bleibt.
snippet.js
1
2
3
4
5
6
7
8
9
function withLogger(WrappedComponent) {const LoggedComponent = forwardRef((props, ref) => {useEffect(() => console.log('Component rendered with:', props), [props]);return <WrappedComponent {...props} ref={ref} />;});LoggedComponent.displayName = `withLogger(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;return LoggedComponent;}
react
Erklärung
1
forwardRef((props, ref) => { ... })
Spezielle React-Utility, die explizit die an die Komponente übergebene Ref erfasst.
2
return <WrappedComponent {...props} ref={ref} />;
Weitergabe der erfassten Ref an die tatsächliche, erweiterte Komponente.
3
LoggedComponent.displayName = ...
Unerlässlich für das Debugging: Setzt einen lesbaren Namen in den React DevTools.