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

このスニペットは次の 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>(
        externalRef,
        () => internalRef.current,
        []
    );

    return internalRef;
};
</telement></telement></telement></telement></telement>

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

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

リンクする

場合によっては、新しい参照を作成するのではなく、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>(externalRef, () => internalRef.current, [
        internalRef,
    ]);
};
</telement></telement></telement></telement>

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

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