Verwenden Sie forwardRef in React With TypeScript

1. Was sind refs in React
2. Warum brauchen wir forwardRef in React
3. die forwardRef in React und TypeScript
4. Verwenden Sie forwardRef mit TypeScript

In den letzten Jahren haben immer mehr Entwickler React und TypeScript gemeinsam verwendet. Stellenbeschreibungen können weiter bestätigen, dass die Verwendung von TypeScript mit React keine Modeerscheinung, sondern Gegenwart und Zukunft ist.

Webentwickler schreiben lieber TypeScript, um den Code übersichtlicher zu gestalten, Fehlerquellen zu reduzieren und Zeit beim Debuggen zu sparen.

Dieser Artikel beschreibt das Weiterleiten einer Referenz von einer untergeordneten Komponente an die übergeordnete Komponente.

Was sind refs in React

Normalerweise ändert sich das Erscheinungsbild des DOM-React-Elements als Reaktion auf Änderungen in state- oder props-Objekten. Mit React können Sie jedoch weiterhin bestimmte DOM-Elemente erfassen und bei Bedarf zwingend ändern.

Refs in React (kurz für Referenzen) ermöglichen Entwicklern den Zugriff auf und die Bearbeitung von DOM-Elementen.

Seit React 16.8 können React-Entwickler den Hook useRef verwenden, um Hooks zu erstellen. Hier ist ein Beispiel.

function App() {
  let inputRef = useRef();
  return (
    <div className>
        <input ref={inputRef} type="text" />
    </div>
  );
}

Hier erstellen wir eine Variable inputRef und initialisieren sie als ref.

Dann finden wir das Element <input> in JSX und setzen sein ref-Attribut auf die zuvor erstellte Variable. Nun wird die Referenz auf dieses Element in der Variablen gespeichert.

Refs werden oft verwendet, um DOM-Elemente direkt zu animieren. Sie heben normalerweise Ränder hervor, wenn das Element fokussiert oder ausgewählt ist, oder lösen unbedingt Animationen aus.

Warum brauchen wir forwardRef in React

Normalerweise greifen wir auf Referenzen in derselben Komponente zu, in der wir sie erstellen.

Manchmal müssen Sie jedoch ein ref für eines der DOM-Elemente in der übergeordneten Komponente definieren, es aber an die untergeordnete Komponente weitergeben. Deshalb brauchen Sie das Feature forwardRef.

die forwardRef in React und TypeScript

Manchmal müssen wir auf ein Element von einer untergeordneten Komponente in der übergeordneten Komponente zugreifen. Angenommen, wir haben eine <Message>-Komponente, die ein <div>-Element enthält, und wir möchten von der übergeordneten <Messenger>-Komponente aus darauf zugreifen.

function Message({messageText}) {
    return <div>{messageText}</div>;
}

Vielleicht möchten wir das Kästchen hervorheben, wenn es scharfgestellt ist. Die einzige Möglichkeit, dies zu tun, besteht darin, in der übergeordneten Komponente ein ref zu erstellen; dann können wir prüfen, ob das Element im Fokus ist und es bedingt hervorheben.

function App() {
  const input = React.useRef<HTMLElement>(null);

  React.useEffect(() => {
    if (input.current) {
      input.current.focus();
    }
  }, []);

  return <Message messageText="hello world" ref={input} />;
}

Dies löst jedoch einen Fehler aus, da eine übergeordnete Komponente nicht direkt auf ein HTML-Element zugreifen kann, das in der untergeordneten Komponente enthalten ist. Stattdessen verwenden wir forwardRef.

Beim Definieren der untergeordneten Komponente müssen wir die folgenden Änderungen vornehmen.

const Message = React.forwardRef((props, ref) => {
    return <div ref={ref}>{props.messageText}</div>;
});

Die forwardRef-Funktion von React macht unser <div>-Element für den Elternteil verfügbar. Wir packen unsere gesamte Komponente in die Funktion forwardRef.

Es gibt eine Komponente zurück, die wir in der Variablen Message speichern können.

Diesmal greift die übergeordnete Komponente auf die Elemente des untergeordneten Elements zu.

Verwenden Sie forwardRef mit TypeScript

Wenn wir im vorherigen Beispiel eine ref-Instanz erstellen und in der input-Variable speichern, geben wir ihren Typ an – <HTMLElement>.

function App() {
  const input = React.useRef<HTMLElement>(null);
	...
  return <Message messageText="hello world" ref={input} />;
}

Das <HTMLElement> ist der allgemeinste Typ für DOM-Elemente in React. Wenn Sie auf ein <div>-Element verweisen, könnten Sie einen spezifischeren Typ wie <HTMLDivElement> verwenden.