Eine ref, die an eine benutzerdefinierte Komponente übergeben wird, erreicht nicht automatisch einen DOM-Knoten in ihr. forwardRef ermöglicht es einer Komponente, eine ref zu empfangen und an ein untergeordnetes Element anzuhängen. useImperativeHandle passt an, diese ref verfügbar macht.
const TextInput = forwardRef(function TextInput(props, ref) {
return <input ref={ref} {...props} />; // parent's ref now points to the <input>
});
// parent can focus the inner input:
const ref = useRef(null);
<TextInput ref={ref} />;
// ref.current.focus();
Manchmal möchte man nicht den gesamten DOM-Knoten offenlegen — nur bestimmte Methoden:
const FancyInput = forwardRef(function FancyInput(props, ref) {
const inner = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => inner.current.focus(),
clear: () => { inner.current.value = ""; },
}), []);
return <input ref={inner} {...props} />;
});
// parent: fancyRef.current.focus(); fancyRef.current.clear();
Bevorzugen Sie props/state für die Kommunikation. Greifen Sie nur zu refs für echte imperative Anforderungen: Fokusverwaltung, Scrolling, Textauswahl, Medienwiedergabe oder Integration imperativer Bibliotheken. Hinweis: In React 19 kann ref als gewöhnlicher prop übergeben werden, daher ist forwardRef oft nicht mehr erforderlich.
Eine Sammlung von IT-Interviewfragen mit ausführlichen Antworten — vom Junior bis zum Senior.
Spenden