다른 구성 요소에 구성 요소를 삽입하십시오.

Question

다른 구성 요소에 구성 요소를 주입하는 기본 방법은 무엇입니까? 나는 부모 View에 대해서만 View가 알고있는 Object Oriented 어플리케이션 구조를 가지고있다. 모든 구성 요소가 '동적'구성 요소이므로 구성 요소 구조를 미리 알지 못합니다.

나는 다음과 같은 공유 코드로 두 가지 방법으로 그것을 시도 :

var subView = React.renderComponent(
    <subcomponent />, 
    parentView.getDOMNode() 
); 

렌더링

/** @jsx React.DOM */ 
var component = React.createClass({ 
    render: function() { 
     return (
      <div> 
       .. many elements here .. 
       {this.props.children} 
      </div> 
     ); 
    } 
}); 
var subcomponent = React.createClass({ 
    render: function() { 
     return (
      <div>test</div> 
     ); 
    } 
}); 

var parentView = React.renderComponent(
    <component>.. subelements</component>, 
    document.getElementById('reactContainer') 
); 

1. 여러 부품이 문제는 슈퍼 구성 요소 내부 HTML이 있다는 것이다 주입 된 구성 요소로 대체됩니다. 또한 다른 오류가 발생하고 있습니다. 이런 식으로 반응하는 방식이 아닌 것 같습니다. 단일 renderComponent

또 다른 접근 방식 setProp를 통해

2를 주입 하위는 아이들이 소품 설정하는 것입니다.

parentView.setProps({ 
    children: <subcomponent /> 
}); 

예상대로 작동하지만 몇 가지 단점이 있습니다. 그것은 주입 된 구성 요소로만 자식을 다시 설정합니다. 이 문제를 해결하려면 다음 작업을 수행 할 수 있습니다.

parentView.setProps({ 
    children: [parentView.props.children, <subcomponent />] 
}); 

그러나 이제 childView는 해당 부모의 자식을 관리합니다. 하지만 parentView에있는 메소드로이를 추출 할 수 있습니다.

또 다른 단점은 뷰 깊이가 2보다 깊을 때 rootView 만 React.renderComponent을 통해 렌더링되기 때문에 React 구성 요소에 대한 참조가 사라져서 rootview에서 setProps 만 수행 할 수 있다는 것입니다.

모든보기에 대해 React.renderComponent이 필요하다고 생각하지만 부모에게 주입하는 방법을 알지 못합니다. 대부분의 경우

Answer 1

(당신이 당신의 예에 표시 등), 다른 구성 요소에 구성 요소를 전달하는 좋은 방법은 특별한 아이들 소품을 사용하고 있습니다 :

var component = React.createClass({ 
    render: function() { 
     return (
      <div> 
       .. many elements here .. 
       {this.props.children} 
      </div> 
     ); 
    } 
}); 

더 here

를 읽을 수 있습니다