ReactのJSXはどのように補間によって配列を分解しますか？

Question

私はThinking in React Tutorialに従っており、下のパート2では、var rowsがJSXを介してマークアップに補間されていることがわかります。 JSXは配列内の各マークアップ項目を分割することをどのように知っていますか？私にとって、{rows}の補間は、1つ1つずつ配置された各マークアップ行ではなく、の配列を単に返します。だから私は、それが代わりに<rowA /> <rowB /> ...

var ProductTable = React.createClass({ 
     render: function() { 
     var rows = []; 
     var lastCategory = null; 
     this.props.products.forEach(function(product) { 
      if (product.category !== lastCategory) { 
      rows.push(<ProductCategoryRow category={product.category} key={product.category} />); 
      } 
      rows.push(<ProductRow product={product} key={product.name} />); 
      lastCategory = product.category; 
     }); 
     return (
      <table> 
      <thead> 
       <tr> 
       <th>Name</th> 
       <th>Price</th> 
       </tr> 
      </thead> 
      <tbody>{rows}</tbody> 
      </table> 
     ); 
     } 
    }); 


    [1]: https://facebook.github.io/react/docs/thinking-in-react.html 

Answer 1

中括弧の[rowA, rowB, ...]を返す見る（シンプルオブジェクトを含む）、任意のJavaScriptの式をインラインで実行するための方法であり、それを評価し反応し、その結果をレンダリングしています。

{rows}を見て、これはそれは考えるものであるリアクト：見てああ、それは配列の配列には何がああ、私は最初の項目があることがわかり

「クールああ、私はレンダリングする変数を持っています！？。私は次のものがProductRowであることを見て、それをレンダリングするつもりです。 "

などです。

あなたが好奇心を持っているタイプなので、here's the sourceは、アイテムが配列かどうかを確認するように見えるので、各アイテムを単一のアイテムと同じようにレンダリングします。

Answer 2

これは前者のJSXTransformer（現在はBabel）です。これはJSX構文をトラバースし、有効なJavaScriptを生成します。 {}が見つかった場合...

• リテラルの場合は、それを返します。それはReact Element、がそれをを変換するなら、それはJavaScript式はなら
• 、それを評価し、それを返す
• （結果はReact Elementである場合には、はをそれに変換します）。
• 配列またはReact Elementの場合は、をそれぞれに個別に変換し、それぞれを返します。

上記のリストはおそらく完全ではありませんが、画像が表示されます。