Erweiterte Verwendung von React Refs: Normalisierung, Klonen und Verknüpfen

React Ref wird in offiziellen Dokumenten als Notausstieg angesehen. In diesem Artikel werde ich fortgeschrittene Möglichkeiten zur Verwendung von React Mutable Ref Object wie Normalisierung, Verknüpfung und Klonen besprechen.

Normalisierung und Klonen

Normalisierung bedeutet, etwas regelmäßiger zu machen. Im React-Fall bedeutet dies, dass in der mit „forwardRef“ umschlossenen Komponente eine konsistente und zugängliche Referenz vorhanden ist. Wie mache ich etwas mit einem Ref-Parameter innerhalb der Komponente?

const Component = forwardRef<HTMLDivElement, unknown>((props, ref) => {
    // ? will not work!
    useEffect(() => {
        ref.current.focus()
    }, []);
    return <div ref={ref}>Hello, world!</div>;
});

Component.displayName = 'ComponentName';

Dieses Snippet ist aus zwei Gründen nicht möglich:

• ref-Parameter kann undefiniert sein, wenn er nicht vom Entwickler bereitgestellt wird.

• Wir wissen nicht, welche Art von Referenz wir erhalten, es kann sein, dass es sich nicht nur um ein veränderbares Ref-Objekt handelt, sondern auch um eine Funktion (Callback-Ref). Die kein aktuelles Eigentum hat.

Hier ist ein React-Hook, der das Problem behebt. Es nimmt alle möglichen vom Benutzer bereitgestellten Refs an und gibt immer ein veränderbares Ref-Objekt aus und sorgt so für die erforderliche Konsistenz.

import type {ForwardedRef, MutableRefObject} from 'react';
import {useImperativeHandle, useRef} from 'react';

// generic type will be resolved by the compiler
const useNormalizeRef = <TElement>(
    externalRef: ForwardedRef<TElement>
): MutableRefObject<TElement | null> => {
    // create a Mutable Ref Object for internal use
    const internalRef = useRef<TElement | null>(null);

    // this hook connects internal and external references
    useImperativeHandle<TElement | null, TElement | null>(
        externalRef,
        () => internalRef.current,
        []
    );

    return internalRef;
};

So verwenden Sie diesen Haken

const Component = forwardRef<HTMLDivElement, unknown>((props, ref) => {
    // create an internal clone of the prop with a consistent type
    const internalRef = useNormalizeRef(ref);

    useEffect(() => {
        // access Mutable Ref Object normally
        internalRef.current!.focus();
    }, [internalRef]);

    return <div ref={ref}>Hello, world!</div>;
});

Component.displayName = 'Component';

Verlinkung

Manchmal müssen wir zwei vorhandene Referenzen verknüpfen, anstatt eine neue zu erstellen. So implementieren Sie es.

import type {ForwardedRef, MutableRefObject} from 'react';
import {useImperativeHandle} from 'react';

export const useLinkRefs = <TElement>(
    externalRef: ForwardedRef<TElement>,
    internalRef: MutableRefObject<TElement | null>
) => {
    useImperativeHandle<TElement | null, TElement | null>(externalRef, () => internalRef.current, [
        internalRef,
    ]);
};

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonErweiterte Verwendung von React Refs: Normalisierung, Klonen und Verknüpfen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!