반응 - TypeScript 및 기능 컴포넌트와 함께 useRef

반응 - TypeScript 및 기능 컴포넌트와 함께 useRef

부모 컴포넌트에서 자식 컴포넌트 메서드를 호출하려고 합니다.useRef.

장차SayHi메서드는 하위 구성 요소의 후크 상태를 업데이트합니다.유감스럽게도, 저는 처리할 수 없는 버그가 있습니다.

회선:ref.current.SayHi();

속성 'SayHi'가 유형 'ForwardRefExotic Component <{ name: string; } & RefAttributes <{ SayHi: ( ) => void; } >'에 없습니다.

회선:<Child name="Adam" ref={ref}/>

'RefObject < ForwardRefExotic Component > < { name : string ; } & RefAttributes < { SayHi : ( ) = > void ; } | RefObject = > 를 입력합니다.유형에는 '({ SayHi: ( ) = > ) > ) | Refoid > Hi | Ref 오브젝트 > 를 할당할 수 없습니다.'RefObject <ForwardRefExotic Component> <{ name: string; } & RefAttributes <{ SayHi: () => void; }>'를 입력하면 'RefObject' 유형에 할당할 수 없습니다.'ForwardRefExoticComponent' 유형 <{ name: string; } & RefAttributes <{ SayHi: () => void; } >에는 속성 'SayHi: () => void; } > > 에는 속성이 없지만 '{ SayHi: () > > 에는 필요합니다.

가득한test.tsx파일:

import React, { useRef, forwardRef, useImperativeHandle, Ref } from 'react'

const Parent = () => {
  const ref = useRef<typeof Child>(null);
  const onButtonClick = () => {
    if (ref.current) {
      ref.current.SayHi();
    }
  };
  return (
    <div>
      <Child name="Adam" ref={ref}/>
      <button onClick={onButtonClick}>Log console</button>
    </div>
  );
}

const Child = forwardRef((props: {name: string}, ref: Ref<{SayHi: () => void}>)=> {
  const {name} = props;
  useImperativeHandle(ref, () => ({ SayHi }));
  
  function SayHi() { console.log("Hello " + name); }
  
  return <div>{name}</div>;
});

저는 이 주제에 대해 깊이 도움을 요청합니다.

다른 곳에서 ref 유형을 추출해야 합니다.

interface RefObject {
  SayHi: () => void
}

그럼 두 곳 다 참고하세요.

const Child = forwardRef((props: {name: string}, ref: Ref<RefObject>)=> {
  const {name} = props;  
  useImperativeHandle(ref, () => ({ SayHi }));
  function SayHi() { console.log("Hello " + name); }

  return <div>{name}</div>;
});

const Parent = () => {
    const ref = useRef<RefObject>(null);
    const onButtonClick = () => {
      if (ref.current) {
        ref.current.SayHi();
      }
    };
    return (
      <div>
        <Child name="Adam" ref={ref}/>
        <button onClick={onButtonClick}>Log console</button>
      </div>
    );
}

의 선언을 대체하기만 하면 됩니다.ref이와 함께.const ref = useRef<{ SayHi: () => void }>(null);

언급URL : https://stackoverflow.com/questions/60554808/react-useref-with-typescript-and-functional-component