React에서 부모로부터 자식 구성 요소 메서드를 호출하는 방법은 무엇입니까?

React의 상위 요소에서 하위 구성 요소 메서드 호출

React 애플리케이션에서는 하위 구성 요소에 정의된 메서드를 해당 하위 구성 요소에서 호출해야 하는 경우가 많습니다. 상위 구성 요소. 이를 달성하기 위한 다양한 접근 방식이 있지만 이 기사에서는 참조를 활용하는 널리 사용되는 방법에 중점을 둡니다.

참조를 통한 명령형 메서드 노출

참조를 사용하면 개발자가 렌더링된 개체에 액세스할 수 있습니다. 구성 요소의 요소와 상호 작용합니다. 이전에는 클래스 기반 컴포넌트에서만 ref를 지원했지만, React Hooks가 도입되면서 이제 함수형 컴포넌트에서도 사용할 수 있습니다.

함수 컴포넌트와 함께 전달Ref 사용

refs를 통해 함수 컴포넌트에 액세스할 수 있게 하려면 함수 컴포넌트를wardRef로 래핑해야 합니다. 이를 통해 ref prop을 통해 할당되고 함수 구성 요소에 두 번째 인수로 전달될 수 있는 ref 객체에 액세스할 수 있습니다.

UseImperativeHandle을 사용하여 메서드 노출

하위 구성 요소에 메서드를 노출하려면 useImperativeHandle 후크를 사용합니다. 이 후크는 ref 객체와 콜백 함수라는 두 가지 인수를 사용합니다. 콜백 함수는 구성 요소 인스턴스를 확장하는 개체를 반환합니다. 반환된 객체 내에서 메소드를 제공함으로써 참조를 통해 액세스할 수 있게 만듭니다.

코드 조각의 예

상위 메소드에서 하위 메소드를 호출하는 방법을 보여드리겠습니다. refs 및 useImperativeHandle 후크를 사용하는 구성 요소:

Child Component

const Child = forwardRef((props, ref) => {

  useImperativeHandle(ref, () => ({

    getAlert() {
      alert("getAlert from Child");
    }

  }));

  return <h1 id="Hi">Hi</h1>;
});

Parent Component

const Parent = () => {
  const childRef = useRef();

  return (
    <div>
      <child ref="{childRef}"></child>
      <button onclick="{()"> childRef.current.getAlert()}>Click</button>
    </div>
  );
};

이 예에서 Child 구성 요소는 ref를 통해 getAlert 메서드를 노출합니다. 현재 속성에 액세스하여 상위 구성요소 ref.

참고: 보다 데이터 중심적이고 선언적인 접근 방식을 선호하므로 하위 구성 요소에 명령형 메서드를 노출하는 것은 일반적으로 권장되지 않는다는 점을 기억하는 것이 중요합니다. 그러나 이 방법은 하위 구성 요소의 기능에 직접 액세스해야 하는 특정 시나리오에서 유용할 수 있습니다.

위 내용은 React에서 부모로부터 자식 구성 요소 메서드를 호출하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!