구성 요소는 어떻게 자녀의 레이아웃을 수행 할 수 있습니까?

Question

나는 2 주 동안 React와 놀았으므로 나는 전문가와 거리가 멀다. 이것이 문제입니다. 저는 자녀들을 배치하는 구성 요소를 만들고 있습니다.

var SomeComponent = React.createClass({ 
    render: function() { 
     return (
      <Layout> 
       <...child 1/> 
       <...child 2/> 
       ... 
      </Layout> 
     ); 
    } 
}); 

음, 레이아웃 아이들을 소유하지 않기 때문에 자신의 소품을 수정할 수 없습니다 : 그건 Layout가 같이 사용할 수있다. 그들은 심판을 포함 할 수 있으므로 어린이를 복제 할 수도 없습니다. 레이아웃을 사용하여 각 자식을 (제대로 배치 된) div로 래핑 할 수 있습니까? 심판을 가지고있는 아이가 SomeComponent 심판을 정확히 갱신 할 수 있습니까? 이 작업을 수행하는 더 좋은 방법이 있습니까?

나는 부모 - 자식 의사 소통의 일반적인 문제에 대해 조금 더 생각했으며 이전보다 훨씬 혼란 스럽다. 설명서 상태 :

"부모 - 자식 통신의 경우 단순히 소품 전달" 문서의 관련 부분에서

우리가 찾을 :

이

"에서 반응, 소유자가 다른 구성 요소의 소품을 설정하는 구성 요소입니다."

그래서 무엇을 제공합니까? 내게는 부모가 아닌 소유자 만이 소품을 설정할 수 있다고 생각합니다.

이 내용은 여러 게시물에서 논의되었지만 만족스러운 답을 찾지 못했습니다. 일부 답변은 부모님의 자녀 복제를 제안하지만, 원래 소유자가 자신의 "소유주"에서 ref 소품을 설정하면 문제가 발생합니다. 위의 예에서 SomeComponent는 Layout으로 전달 된 구성 요소를 자식으로 소유합니다. 레이아웃에서 자식을 복제하면 (콜백을 추가하기 위해) 레이아웃이 복제본의 소유자가되어 SomeComponent 참조가 가져 오지 못합니다.

나는 완전히 혼란 스럽다.

Answer 1

나는 당신이 무엇을 요구하고 있는지 잘 모르지만, <Layout />과 같은 포장 구성 요소가 아이들에게 할 수있는 것들이 있습니다.

div에 각 하위 구성 요소를 래핑하고 싶습니다. 다음은 그 예는 다음과 같습니다

var Layout = React.createClass({ 
    render: function() { 
     var children = []; 
     if (this.props.children) { 
      for (var i=0; i < this.props.children.length; i++) { 
       var child = this.props.children[i]; 
       children.push(
        <div className="child-container"> 
         {child} 
        </div> 
       ); 
      } 
     } 

     return (
      <div className="layout-container"> 
       {children} 
      </div> 
     ); 
    } 
}); 

당신이 아이 컴퍼넌트 단지 배열 인 this.props.children에 Layout의 자녀에 액세스 할 수 있는지 볼 수 있습니다 위. 위의 간단한 for 루프를 사용하거나 this.props.children.map을 사용하면 각 자식을 래핑 할 수 있지만 마음에 들게하고 렌더링 할 수 있습니다.