React Refs の高度な使用法: 正規化、クローン作成、リンク

React Ref は公式ドキュメントでは脱出ハッチとみなされます。この記事では、正規化、リンク、クローンなど、React Mutable Ref オブジェクトの高度な使用方法を確認します。

正規化とクローン作成

正規化とは、何かをより規則的にすることを意味します。 React の場合、forwardRef でラップされたコンポーネント内に一貫性のあるアクセス可能な ref があることを意味します。コンポーネント内で ref パラメーターを使用して何かを行うにはどうすればよいですか?

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

Component.displayName = 'ComponentName';

このスニペットは次の 2 つの理由により不可能です:

• ref パラメータは、開発者によって提供されていない場合、未定義になる可能性があります。

• 取得している参照の種類はわかりません。それは単なる Mutable Ref オブジェクトではなく、関数 (コールバック ref) である可能性もあります。現在のプロパティがありません。

問題を解決する React フックは次のとおりです。これは、ユーザーが提供した可能なすべての ref を受け取り、常に Mutable Ref オブジェクトを発行するため、必要な一貫性が提供されます。

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

このフックの使用方法は次のとおりです

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

リンクする

場合によっては、新しい参照を作成するのではなく、2 つの既存の参照をリンクする必要があります。実装方法は次のとおりです。

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

コーディングを楽しんでください!

以上がReact Refs の高度な使用法: 正規化、クローン作成、リンクの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。