React Refs penggunaan lanjutan: normalisasi, pengklonan dan pemautan

React Ref dianggap sebagai pintu keluar dalam dokumen rasmi. Dalam artikel ini, saya akan menyemak cara lanjutan menggunakan React Mutable Ref Object seperti penormalan, memaut dan pengklonan.

Normalisasi dan pengklonan

Penormalan bermaksud menjadikan sesuatu lebih teratur. Dalam kes React, ini bermakna mempunyai ref yang konsisten dan boleh diakses dalam Komponen yang dibalut dengan forwardRef. Bagaimana untuk melakukan sesuatu dengan parameter ref di dalam komponen?

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

Component.displayName = 'ComponentName';

Coretan ini tidak boleh dilakukan atas dua sebab:

• parameter ref mungkin tidak ditentukan, apabila tidak disediakan oleh pembangun.

• Kami tidak tahu jenis rujukan yang kami peroleh, ia mungkin bukan sekadar Objek Ref Boleh Ubah, tetapi juga fungsi (rujuk balik). Yang tidak mempunyai harta semasa.

Berikut ialah cangkuk React yang membetulkan isu tersebut. Ia mengambil semua rujukan yang disediakan pengguna yang mungkin dan sentiasa mengeluarkan Objek Ref Boleh Berubah, dengan itu memberikan kami konsistensi yang diperlukan.

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

Berikut ialah cara menggunakan cangkuk ini

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

Memautkan

Kadangkala kita perlu memautkan dua rujukan sedia ada dan bukannya membuat rujukan baharu. Berikut ialah cara untuk melaksanakannya.

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

Selamat mengekod!

Atas ialah kandungan terperinci React Refs penggunaan lanjutan: normalisasi, pengklonan dan pemautan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!