React - 어떻게 두 단계의 계층을 전달한 다음 다른 계층으로 전달합니까?

Question

나는 <Left Child 2/>에서 <Right Child 2/>에게 전달하고 싶은 상태가 있습니다. 둘 다 하나의 부모 (위의 부모)를 가지며 동일한 부모 컨테이너를 참조합니다.

구조는 다음과 같이이다 :

 <ParentContainer /> 
     |   | 
     |   | 
     v   v 
<Left Child 1/> <Right Child 1/> 
     v   v 
<Left Child 2/> <Right Child 2/> 

어떻게 최대 데이터 하나가 아닌 두 개의 계층을 통과하게 반응하고 같은 부모에서 다른 나무를 아래로 전파합니까?

Answer 1

상위 구성 요소에 함수 및 기본 내부 상태를 추가하십시오. 그런 다음 함수를 <Left Child 2/>으로 전달하고 거기에서 함수를 호출하면 전달 된 데이터가 상위 구성 요소의 상태로 설정됩니다. 상위 구성 요소의 상태는 <Right Child 1/>까지 전달할 수 있습니다.

여기에있는 키는 부모 구성 요소 인 데이터에이라는 진실의 단일 소스 을 가지고있는 것입니다.

Answer 2

다른 유사한 질문에 대한 답변이 귀하의 경우에도 효과적입니다. 주요 아이디어는 콜백 함수를 부모에서 다단계 자식 컴포넌트로 전달한 다음 자식 컴포넌트에서 콜백 함수를 트리거하는시기와 방법을 전달하는 것입니다.

=====

, 내가 ^^ 생각을 그렇게 복잡하지 않습니다 내 대답을 읽어 주시기 바랍니다 :

Force React container to refresh data

및

(이 유사한 문제입니다)

Re-initializing class on redirect (이것은 내 주요 설명이며, 멀티 레벨 어린이를 통해 아래쪽으로 소품으로 콜백 함수를 전달하고이를 트리거하는 방법에 대한 데모입니다)

=====

실제로 부모 구성 요소가 업데이트되면 모든 자식도 업데이트됩니다! 따라서 위의 링크에서 이미 언급했듯이 Flux 또는 Redux를 사용하면 좋은 접근 방법이 될 것입니다. 많은 어린이 구성 요소를 통해 소품을 전달하는 복잡성을 없애줍니다.