javascript / intermediate
Snippet
Weiterleitung von Refs an Kind-Komponenten
Ref-Forwarding ist eine Technik, um eine Ref automatisch durch eine Komponente an eines ihrer Kinder weiterzureichen. Dies ist besonders nützlich für wiederverwendbare Komponenten wie Buttons oder Inputs, auf deren DOM-Knoten Eltern zugreifen müssen, um Fokus, Selektion oder Maße zu verwalten.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { forwardRef, useRef } from 'react';const CustomInput = forwardRef((props, ref) => (<input ref={ref} className="custom-input" {...props} />));function Parent() {const inputRef = useRef(null);const handleClick = () => inputRef.current.focus();return (<><CustomInput ref={inputRef} /><button onClick={handleClick}>Focus Input</button></>);}
react
Erklärung
1
const CustomInput = forwardRef((props, ref) => (
Umhüllt die Komponente mit forwardRef, um ein Ref-Argument neben den Props zu akzeptieren.
2
<input ref={ref} ... />
Verknüpft die weitergeleitete Ref direkt mit dem zugrunde liegenden DOM-Element.