React 함수 구성 요소 및 Typescript를 사용한 참조 전달

참조 전달은 공식 문서에 잘 설명되어 있지만 함수 구성 요소와 함께 올바르게 입력하는 것은 혼란스러울 수 있습니다.

1. 전달할 참조 입력

참조는 createRef 기능.

달리 useRef 후크, MutableRefObject 누구의 .current 속성은 undefined로 초기화될 수 있습니다. 값, createRef 반환 immutable RefObject 따라서 초기 값 유형이 최종 값 유형과 다른 것에 대해 신경 쓸 필요가 없습니다.

const refTitle: React.RefObject<Text> = React.createRef<Text>();
// In real life, you don't need to explicitly type refTitle 

이 예에서 참조는 Text 따라서 구성 요소 Text 구성 요소가 createRef type argument 명시적으로 type 참조 값.

2. 자식 컴포넌트에 대한 참조 전달

ref attribute 자식 구성 요소의:

const ParentComponent: React.FC = () => {
  const refTitle = React.createRef<Text>();
  return (
    <ChildComponent ref={refTitle} title="Hello, World!" />
  );
}

3. 자식 컴포넌트 내부에 전달된 ref 할당하기

문서에서 말했듯이 :

By default, you may not use the ref attribute on function components because they don’t have instances.

If you want to allow people to take a ref to your function component, you can use forwardRef

그런 다음 forwardRef 기능:

interface ChildComponentProps { 
  title: string; 
}

const ChildComponent = React.forwardRef<Text, ChildComponentProps>(
  (
    { title }: ChildComponentProps,
    ref: React.ForwardedRef<Text>,
  ): JSX.Element => {
    return (
      <Text ref={ref}>{title}</Text>
    );
  },
);

// Name the component for debugging purpose and prevent eslint warning.
ChildComponent.displayName = 'ChildComponent';

이제 변경할 수 없는 RefObject ParentComponent Text를 가리키는 ChildComponent .

구체적인 예

다음은 전체 상위 구성 요소가 준비되면 참조 전달을 사용하여 장치의 화면 판독기를 텍스트에 집중할 수 있는 React Native의 예입니다.

_{사진 작성자 JC Gellidon 에 Unsplash}