依存性注入 - 子コンポーネントを親コンポーネントに渡す

Question

親コンポーネントの小道具として子コンポーネントを渡すことが慣習的/標準的な方法であるかどうかを判断しようとしています。私はこれの良い例を見つけることができないと、これはthis.props.childrenとは何かを持っているかどうかを判断するために苦労しています....言って、私はシンプルなので同様にコンポーネントに反応している：

const Clazz = React.createClass({ 

    render: function(){ 

     return (
      <this.props.A/> 
      <this.props.B/> 
      {this.props.children} 
     ) 
    } 
}); 

は、私は、このコンポーネントをレンダリングしたいとして、次のように2つの子コンポーネントを渡します：

const A = React.createClass({ 
    render:() => 'a'; 
}) 

const B = React.createClass({ 
    render:() => 'b'; 
}) 


ReactDOM.render(<Clazz A={A} B={B} />, document.getElementById('root')); 

私が小道具を介してコンポーネントCの子を渡したかったのです。私が理解していないことは、これはthis.props.childrenと違うのですか？私がここでやったことは十分ですか？ 小道具として子どもを渡す慣習的な方法は何ですか？this.props.children？何ヶ月も経たないうちに、私はまだthis.props.childrenのすべてを取得していません。私はthis.props.childrenがReactによって設定され、私がではないと仮定します。はその値を設定する予定ですが、わかりません。

Answer 1

JSXを使用する場合、単純に構文の砂糖をReact.createElement以上に使用しています。

子供はJSXのコンポーネントのタグの中に入れ子にしています。これはReact.createElementの3番目の引数に変換されます。

React.createElement(
    type, 
    [props], 
    [...children] 
) 

ので、このJSX：

<Clazz A={A} B={B}> 
    'Hello' 
</Clazz> 

たが、これに翻訳します：

const element = React.createElement(
    'Clazz', 
    {A: A, B: B}, 
    'Hello' 
); 

props.children時々は時々、配列ではありません。このため、Reactには、それらを扱うためのユーティリティがいくつかあります。詳細はこちらhttps://facebook.github.io/react/docs/react-api.html#react.children

最後に、すべてが機能に「コンパイル」されています。 あなたのコンポーネントが工場のように機能していて、手前で何がレンダリングされるのかわからない場合、コンポーネントを小道具として渡すのは理にかなっています。

親レンダリング方法で表示されるコンテンツを単にフィードしたい場合は、子を使用する方が適切です。

あなたがそれを扱っていれば、Angularの "transclude"と似ています。

小児は何でも構いませんが、子どもは常に反応要素です。 一般的に私は、人々は子供たちが提供されたものとしてレンダリングされることを期待していると考えていますが、小道具はコンテンツの出力に影響を与える明確な動作を持っています。より正確には注意
を追加しました

、React.createElement以上の3つの引数を渡すことができます。しかし、3番目から始まって、彼らは子供たちです。

Babel replで this example where there is more than one child in JSX/React.createElementを確認できます。

Answer 2

あなたが直接そうように子供を渡すことができますので、完全なサンプルは次のようになります

render: function(){ 
    return (
     {this.props.children} 
) 
} 

：

をそうのような方法をレンダリングClazzでそれらをレンダリング/

ReactDOM.render(<Clazz> 
     {A} 
     {B} 
    </Clazz>, document.getElementById('root')) 

とアクセス

const Clazz = React.createClass({ 
    render: function(){ 
    return (
     {this.props.children} 
    ) 
    } 
}); 

const A = React.createClass({ 
    render:() => 'a'; 
}) 

const B = React.createClass({ 
    render:() => 'b'; 
}) 


ReactDOM.render(<Clazz>{A}{B}</Clazz>, document.getElementById('root'));