javascript / expert
Snippet
Kapselung von Komponenten-APIs mit useImperativeHandle
Anstatt den gesamten DOM-Knoten freizugeben, ermöglicht useImperativeHandle die Definition einer benutzerdefinierten, eingeschränkten API für eine untergeordnete Komponente, was die Kapselung und Wartbarkeit verbessert.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const CustomInput = forwardRef((props, ref) => {const inputRef = useRef(null);useImperativeHandle(ref, () => ({focusAndSelect: () => {inputRef.current.focus();inputRef.current.select();},clear: () => {inputRef.current.value = '';}}));return <input ref={inputRef} {...props} />;});
react
Erklärung
1
forwardRef((props, ref) => { ... })
Umschließt die Komponente, damit sie eine Ref von ihrer übergeordneten Komponente empfangen kann.
2
useImperativeHandle(ref, () => ({ ... }))
Passt den Instanzwert an, der übergeordneten Komponenten bei der Verwendung von Ref angezeigt wird.
3
inputRef.current.select()
Führt interne DOM-Logik aus, die von den Belangen der übergeordneten Komponente abstrahiert ist.