React의 상위 구성 요소에서 하위 메서드를 어떻게 호출할 수 있나요?

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

React에서 항상 하위 메서드를 직접 호출할 필요는 없습니다. 그러나 하위 구성 요소가 명령형 메서드를 노출하는 경우와 같이 필요할 수 있는 경우가 있습니다. 이 문서에서는 클래스 기반 구성 요소와 기능 구성 요소 모두에 대해 참조를 사용하여 이를 달성하는 방법을 보여줍니다.

클래스 기반 구성 요소

참조를 사용하여 상위 클래스 기반 구성 요소에서 하위 메서드를 호출하려면, 다음 단계를 따르세요.

1. 다음을 사용하여 상위 구성 요소에 참조를 만듭니다. createRef():

const childRef = React.createRef();

2. ref를 하위 구성 요소에 할당합니다.

<Child ref={childRef} />

3. childRef를 사용하여 하위 구성 요소에 액세스합니다. :

childRef.current.getAlert();

기능적 구성요소 with Hooks

React Hooks의 도입으로 이제 기능적 컴포넌트에서도 ref를 사용할 수 있습니다. refs를 사용하여 상위 기능 구성 요소에서 하위 메서드를 호출하는 방법은 다음과 같습니다.

1. useRef() 후크를 사용하여 ref를 생성합니다.

const childRef = useRef();

2. 자식 구성 요소를 ForwardRef로 래핑하여 액세스합니다. ref:

const Child = forwardRef((props, ref) => {
  // ...
});

3. useImperativeHandle 후크를 사용하여 하위 메소드를 상위 메소드에 노출합니다.

useImperativeHandle(ref, () => ({ getAlert() { alert('clicked'); } }));

4. 액세스하려면 childRef를 사용하세요. 그 아이의 메소드:

childRef.current.getAlert();

참고: React에서는 하위 메소드를 호출하기 위해 ref를 사용하는 것이 일반적으로 권장되지 않는다는 점에 유의하는 것이 중요합니다. 소품과 상태를 통해 데이터를 아래로 전달하고 이벤트를 위로 전달하는 것이 더 좋습니다.

위 내용은 React의 상위 구성 요소에서 하위 메서드를 어떻게 호출할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!