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

javascript

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

const CustomInput = forwardRef((props, ref) => (

Umhüllt die Komponente mit forwardRef, um ein Ref-Argument neben den Props zu akzeptieren.

Verknüpft die weitergeleitete Ref direkt mit dem zugrunde liegenden DOM-Element.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Weiterleitung von Refs an Kind-Komponenten

Verwandt