어린이 소품 하위 구성 요소에서

Question

상위 구성 요소에 표시되지 않습니다, 나는 다음과 같은 소품을 설정

function mapStateToProps(state) { 
    return { 
    user : state.App.get('user'), 
    foo: 'ok' 
    } 
} 

을하지만 상위 구성 요소의 render 방법에 this.props.children을 읽을 때, foo는 없다. 왜 그 사람이 누군지 압니까?

나는 내 프로젝트에서 부모로부터 자식 상태를 볼 수 없다는 것을 깨달았다. 내가 놓친 게 있니?

또한이 앱에서 Redux를 사용하고 있습니다. 뭐가 문제 야? 부모 컴포넌트에서 this.props.children.foo과 같은 것을 수행하는 올바른 방법은 무엇입니까?

Answer 1

foo를 얻으려면 this.props.children.foo을 참조하면 안됩니다. 당신이 mapStateToProps에 구성 요소를 연결 한 후에는 모든 개방 묶여 요소와 구성 요소 반응의 종료 태그를 검색합니다 단지 this.props.foo

this.props.children에서 참조 할 수 있어야한다. http://codepen.io/gaearon/pen/ozqNOV?editors=0010

function WelcomeDialog() { 
    return (
     <FancyBorder color="blue"> 
      /*everything between these two blocks*/ 
      <h1 className="Dialog-title"> 
       Welcome 
      </h1> 
      <p className="Dialog-message"> 
       Thank you for visiting our spacecraft! 
      </p> 
      /*is what is sent to FancyBorder as this.props.children*/ 
     </FancyBorder> 
    ); 
} 

출처 : 사용할 수 https://facebook.github.io/react/docs/composition-vs-inheritance.html