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

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

React에서 구성 요소 간 통신은 일반적으로 props(속성)와 이벤트를 통해 이루어지지만 다음을 사용하여 상위 구성 요소에서 하위 구성 요소 메서드에 액세스하고 호출할 수 있습니다. reference.

Ref를 사용한 메서드 호출

1. forwardRef에 하위 구성 요소 래핑: 하위 구성 요소 인스턴스에 액세스하려면 이를 ForwardRef에 래핑합니다. . 이를 통해 React는 ref를 구성 요소의 두 번째 인수로 전달할 수 있습니다.
2. 하위 인스턴스 참조 초기화: 상위 구성 요소에서 useRef()를 사용하여 참조를 생성합니다. 그러면 하위 구성 요소 인스턴스에 대한 참조가 저장됩니다.
3. 하위 항목에 참조 할당: ref prop을 사용하여 참조를 하위 구성 요소에 전달합니다. 그러면 하위 구성 요소 인스턴스가 상위 구성 요소의 참조에 할당됩니다.
4. 하위 메서드 노출: 하위 구성 요소 내에서 useImperativeHandle을 사용하여 상위 구성 요소에 노출하려는 메서드가 포함된 객체를 반환합니다.

예시 후크

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    getAlert() {
      alert("getAlert from Child");
    }
  }));

  return <h1>Hi</h1>;
});

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

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.getAlert()}>Click</button>
    </div>
  );
};

ReactDOM.render(<Parent />, document.getElementById('root'));

이 예에서 getAlert()는 childRef의 현재 속성에 액세스하여 Parent 구성 요소에서 호출할 수 있는 Child 구성 요소에 의해 노출되는 메서드입니다. 상위 메소드에서 직접 하위 메소드를 호출하는 것은 권장되지 않으며 적절한 구성요소 통신 패턴을 위해 피해야 합니다.

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