javascript / intermediate
Snippet
Refs an Kind-Komponenten weiterleiten
Standardmäßig können keine 'ref'-Attribute an funktionale Komponenten übergeben werden, da diese keine Instanzen besitzen. 'forwardRef' umschließt eine Komponente und erlaubt es ihr, eine Ref als zweites Argument zu empfangen und an ein spezifisches internes DOM-Element oder eine Komponente zu binden.
snippet.js
1
2
3
4
5
6
7
8
9
import { forwardRef } from 'react';const CustomInput = forwardRef((props, ref) => (<div className="input-wrapper"><input {...props} ref={ref} className="styled-input" /></div>));// Usage: const inputRef = useRef(); <CustomInput ref={inputRef} />
react
Erklärung
1
const CustomInput = forwardRef((props, ref) => ...
Umschließt die Komponentenfunktion, um das 'ref'-Argument neben den 'props' verfügbar zu machen.
2
<input {...props} ref={ref} ... />
Bindet die eingehende Ref direkt an das native HTML-Input-Element.