javascript / expert
Snippet
Feingranulare Steuerung mit useImperativeHandle
useImperativeHandle passt den Instanzwert an, der Elternkomponenten bei Verwendung von ref offengelegt wird. Anstatt den gesamten DOM-Knoten freizugeben, können Sie nur spezifische Methoden bereitstellen, was eine bessere Kapselung fördert und steuert, wie Eltern mit Interna interagieren.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const CustomInput = React.forwardRef((props, ref) => {const inputRef = React.useRef();React.useImperativeHandle(ref, () => ({focus: () => inputRef.current.focus(),shake: () => {inputRef.current.classList.add('shake');setTimeout(() => inputRef.current.classList.remove('shake'), 500);}}));return <input ref={inputRef} {...props} />;});// Usage in Parentconst parentRef = React.useRef();<CustomInput ref={parentRef} /><button onClick={() => parentRef.current.shake()}>Alert!</button>
react
Erklärung
1
React.forwardRef((props, ref) => { ... })
Ermöglicht der Komponente, ein ref von ihrer Elternkomponente zu erhalten.
2
React.useImperativeHandle(ref, () => ({ ... }))
Definiert die spezifische API (focus, shake), auf die das Elternteil über das ref zugreifen kann.