React Refs 고급 사용법: 정규화, 복제 및 연결

React Ref는 공식 문서에서 탈출구로 간주됩니다. 이번 글에서는 정규화, 링크, 복제

등 React Mutable Ref Object를 사용하는 고급 방법을 검토하겠습니다.

정규화 및 복제

정규화란 무언가를 더 규칙적으로 만드는 것을 의미합니다. React의 경우 이는wardRef로 래핑된 구성 요소에 일관되고 액세스 가능한 참조가 있음을 의미합니다. 구성 요소 내부의 참조 매개변수를 사용하여 작업을 수행하는 방법은 무엇입니까?

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 매개변수는 개발자가 제공하지 않은 경우 정의되지 않음일 수 있습니다.

• 우리는 어떤 유형의 참조를 받고 있는지 모릅니다. 이는 Mutable Ref 객체일 수도 있고 함수(콜백 참조)일 수도 있습니다. 현재 속성이 없습니다.

다음은 문제를 해결하는 React 후크입니다. 가능한 모든 사용자 제공 참조를 사용하고 항상 변경 가능한 참조 개체를 내보내므로 필요한 일관성을 제공합니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!