javascript / intermediate
Snippet
Refs an Kind-Elemente weiterleiten
React.forwardRef ermöglicht es Komponenten, ihre internen DOM-Knoten für Elternkomponenten freizugeben. Dies ist entscheidend für die Barrierefreiheit, das Fokus-Management oder die Integration mit Drittanbieter-DOM-Bibliotheken.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const CustomInput = React.forwardRef((props, ref) => (<div className="input-wrapper"><label>{props.label}</label><input ref={ref} {...props} /></div>));function Parent() {const inputRef = React.useRef();const focusInput = () => inputRef.current.focus();return (<><CustomInput label="User Name" ref={inputRef} /><button onClick={focusInput}>Focus Input</button></>);}
react
Erklärung
1
React.forwardRef((props, ref) => ...)
Eine Funktion höherer Ordnung, die die Ref als zweites Argument an die Komponentenfunktion übergibt.
2
<input ref={ref} />
Verknüpft die weitergeleitete Ref mit dem tatsächlichen DOM-Element, damit das Elternteil darauf zugreifen kann.