React Refs 進階用法：規範化、克隆和鏈接

React Ref 在官方文件中被認為是一個逃生艙口。在本文中，我將回顧使用 React Mutable Ref Object 的高級方法，例如 標準化、連結 和 克隆。

標準化和克隆

標準化意味著使某些事情變得更加規則。在 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';

此片段不可能有兩個原因：

• ref 參數可能是未定義，如果開發者未提供。

• 我們不知道我們得到的是什麼類型的引用，它可能不僅僅是一個可變引用對象，而且還是一個函數（回調引用）。沒有當前屬性。

這是一個修復該問題的 React hook。它接受所有可能的用戶提供的引用，並始終發出可變的引用對象，從而為我們提供所需的一致性。

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

連結

有時我們需要連結兩個現有的引用而不是建立一個新的引用。以下是如何實現它。

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中文網其他相關文章！