Utilisation avancée de React Refs : normalisation, clonage et liaison

React Ref est considéré comme une trappe de secours dans la documentation officielle. Dans cet article, j'examinerai les méthodes avancées d'utilisation de React Mutable Ref Object telles que la normalisation, la liaison et le clonage.

Normalisation et clonage

La normalisation signifie rendre quelque chose de plus régulier. Dans le cas de React, cela signifie avoir une référence cohérente et accessible dans le composant enveloppé avec forwardRef. Comment faire quelque chose avec un paramètre ref à l'intérieur du composant ?

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

Component.displayName = 'ComponentName';

Cet extrait n'est pas possible pour deux raisons :

• Le paramètre ref peut être non défini, lorsqu'il n'est pas fourni par le développeur.

• Nous ne savons pas quel type de référence nous obtenons, ce n'est peut-être pas seulement un objet de référence mutable, mais aussi une fonction (ref de rappel). Qui n'a pas de propriété actuelle.

Voici un hook React qui résout le problème. Il prend toutes les références possibles fournies par l'utilisateur et émet toujours un objet de référence mutable, nous fournissant ainsi la cohérence requise.

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;
};

Voici comment utiliser ce crochet

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';

Enchaînement

Parfois, nous devons lier deux références existantes au lieu d'en créer une nouvelle. Voici comment le mettre en œuvre.

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,
    ]);
};

Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!