하위 컴포넌트를 자식으로 대 속성으로 전달하기

Question

하위 컴포넌트를 React 컴포넌트로 하위 또는 특성으로 전달할 수 있음을 확인했습니다.

e.e.

$(document).ready(doStuff); 

function doStuff() { 

    ReactDOM.render(
      <App1> 
       <li>line 1 </li> 
       <li>line 2 </li> 
      </App1>, $('#app1')[0]); 

    ReactDOM.render(
      <App2 child1={<li>line 1</li>} 
        child2={<li>line 2</li>} 
      /> , $('#app2')[0]);  

} 

const App1 = React.createClass({ 
    render: function() { 
     return (
      <ul> 
       {this.props.children} 
      </ul> 
     ); 
    } 
}); 

const App2 = React.createClass({ 
    propTypes: { 
     child1: React.PropTypes.object.isRequired, 
     child2: React.PropTypes.object.isRequired 
    }, 
    render: function() { 
     return (
      <ul> 
       {this.props.child1} 
       {this.props.child2} 
      </ul> 
     ); 
    } 
}); 

내 질문

은 다음과 같습니다 :

1. (예를 들어 cloneElement에 대한 아마도) 두 가지 방법 사이에 차이가있는 아래 SSCCE는 두 가지 접근 방식을 예시? 필자가 볼 수있는 한 가지 차이점은 소품 접근 방식을 사용하면 하위 구성 요소에 대한 유형 정보를 propTypes에 추가 할 수 있다는 것입니다.
2. 하위 자식이 속성으로 전달되면 propsTypes 특성에 일반 Javascript 객체가 아닌 React 구성 요소임을 나타내는 관용적 방법이 있습니까? console.log(this.props.child1.constructor.name)을 실행하면 Object 만 인쇄됩니다.

Answer 1

this.props.children의 장점은 컨테이너 구성 요소의 통 신당입니다.

그러나 많은 제약이 있습니다. 문제는 정규 배열이 아니며 요소가 2 개 미만인 배열이 아니기 때문에 Array의 map과 같은 표준 도구 대신 React.Children.map과 같은 전용 도구를 사용해야한다는 것입니다.

소품이 좋다면 계속 사용하십시오.