반응에서 부모와 의사 소통을하는 Ansestors

Question

하나의 이벤트로 구성된 구성 요소를 만들어 특정 레벨 (하위 또는 손자 또는 더 깊은)의 조상 안에 배치하려는 경우 이벤트가 트리거되면이 조상의 부모가 작동합니다 (예 : alert ("나는"+ parent.name + "내 ansestor 중 한 명이 뭔가했다")). 낡은 민족의 집을 상상해보십시오. 주민들은 죽기를 거절하고 백만 명의 조상을 가졌으며 거주자들은 조상 중 한 조가 생일을 가질 때마다 서로에게 알립니다. 관찰자 패턴이 반응하는 것을 이해하고 있기 때문에이 작업을 수행하는 가장 훌륭한 방법은 무엇입니까? 자식을 만들 때 부모 객체를 수동으로 전달하지 않고 수행 할 수 있습니까? 나는이 작업을 수행하는 방법을 알고

Answer 1

한 가지 방법은 아이에서 parentsFunction를 실행 한 경우 이제 부모

class Parent extends React.Component { 
 
    constructor(props) { 
 
    super(props) 
 
    
 
    this.doSomethingInParent = this.doSomethingInParent.bind(this); 
 
    } 
 
    
 
    doSomethingInParent() { 
 
    console.log('running in parent'); 
 
    } 
 
    
 
    render() { 
 
    return <Child parentsFunction={this.doSomethingInParent} /> 
 
    } 
 
}

에 무언가를 수행하는 "가계도"아래 함수를 전달하는 것입니다 컴포넌트에서는 doSomethingInParent 안에 console.log가 표시됩니다. 더 깊이 들어가기를 원한다면 더 복잡한 애플리케이션에서 지루할 수있는 소품을 통해 계속해서 기능을 전달해야합니다. 그래서 redux/flux가 상태/발송 작업을 관리하고 긴 콜백 함수 체인을 피할 수 있기 때문에 널리 사용되는 이유입니다.

Answer 2

getChildContext 용액을 사용하여 발견하고, 이후의 논의는 childContextTypes : check if a component is a child or ancestor of another component ReactJS (2 개 솔루션)을 참조 예 : https://jsfiddle.net/shaibam/d0q5mwc4/33/이. 함수 전달

contextTypes: { 
    notifyChange: React.PropTypes.func 
}.....