反応のある小道具をレンダリングする

Question

誰かが、反応ルータが機能するために「小道具」に包まれた「props.children」を持っていなければならない理由を説明してください。

これは動作します：

export default (props) => { 
     return (
      <div id="main-template"> 
       {props.children} 
      </div> 
     ); 
} 

はしかし、これはそうではない：

export default (props) => { 
     return (
       {props.children} 
     ); 
} 

任意の説明がはるかに高く評価されるだろう。あなたは1つのノードを持っている場合は

Answer 1

は、あなたが複数のノードを持っている場合、あなただけの、たとえば、props.children

const Component = (props) => { 
    return props.children; 
}; 

Example

を返すことができ、{}にラップprops.childrenを必要としない

<p>1</p> 
<p>2</p> 
<p>3</p> 

あなたはにする必要があります。つのルート要素に、コンポーネントのみを1つのルート要素を返さなければならないので、あなたがこの

return (
    <p>1</p> 
    <p>2</p> 
    <p>3</p> 
) 

Answer 2

JSXのように、いくつか返すことができないでは、JavaScript関数呼び出しにHTMLに見えるコードを変換します。戻って複数のトップレベルのコンポーネント

return (
    <p>text</p> 
    <p>text</p> 
    <p>text</p> 
); 

は有効でない

return (
    React.createElement('p', null, 'text'), 
    React.createElement('p', null, 'text'), 
    React.createElement('p', null, 'text') 
); 

に変換されます。単一の値を返す必要があるので、複数のトップレベル要素をレンダリングすることはできません。 Reactチームはこれをどのように処理するかを考えてきましたが、現在解決策はありません。