하위 액세스 상위 구성 요소

Question

이 "역설"을위한 깨끗한 솔루션이 있다면 어떤 아이디어가 있습니까?

class Container extends Component { 
    render() { 
     <Parent> // ---------v 
      <Child parent={Parent} /> // Reference to "Parent" 
     </Parent> 
    } 
} 

문제는 <Child>가<Parent> 전에 렌더링되는 것을 물론이다.

궁극적으로 목표는 <Parent> 인 인스턴스 메서드를 <Child>에서 호출 할 수있게하는 것입니다. 같은 (ref) 같은

이미 시도 해결, 콜백 함수 (getParentReference()), cloneElement() 또는 this._reactInternalInstance을 사용하여 새 소품으로 추가하여 기준을 통과,하지만 그들 중 누구도 (매우 해키되는 것을 떨어져) 일 것 같았다.

Answer 1

콜백 함수를 사용해야합니다.

콜백 기능

부모는 다음과 같이 소품으로 아이에 함수를 전달할 것 :

<MyChild myFunc={this.handleChildFunc.bind(this)} /> 

을 그리고 아이가 너무 좋아 그 함수를 호출 할 것이다 :

this.props.myFunc(); 

그리고 아이가 propotype에 선언 된이 함수를 필요로한다는 것을 잊지 마십시오 :

MyChild.propTypes = { 
    myFunc: React.PropTypes.func, 
}; 

자세한 내용은 8 no-Flux strategies for React component communication