サブコンポーネントを子として渡すかプロパティとして返す

Question

従属コンポーネントを子コンポーネントまたはプロパティとしてReactコンポーネントに渡すことが可能です。

I.e. SSCCE以下の両方のアプローチを例示：

$(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に関して）との間に何らかの違いがありますか？私が見ている違いの1つは、小道のアプローチでは、従属コンポーネントに関するタイプ情報をpropTypesに追加できるということです。
2. 従属子がプロパティとして渡された場合、propsTypes属性に、それらがジェネリックなJavascriptオブジェクトではなくリアクションコンポーネントであることを示す慣用的な方法があります。 console.log(this.props.child1.constructor.name)を実行すると、単にObjectが印刷されます。

Answer 1

this.props.childrenの利点は、コンテナコンポーネントのシンタックスシュガーです。

しかし、それには多くの制限があります。問題は、通常の配列ではなく、要素が2つ未満の配列でもないため、Arrayのmapのような標準ツールの代わりにReact.Children.mapのような専用ツールを使用する必要があるということです。

小道具をお持ちの場合は、そのままお使いください。