React的JSX如何通過插值打破數組？

我正在關注Thinking in React Tutorial，並在下面的第2部分中看到，通過JSX將var rows內插到標記中。 JSX如何知道分解數組中的每個標記項？因爲對我來說，{rows}的插值將簡單地返回標記的數組，而不是逐個佈置的每個標記行。所以，我看到它回到[rowA, rowB, ...]代替<rowA /> <rowB /> ...React的JSX如何通過插值打破數組？

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

來源

2016-08-11 mangocaptain

大括號是執行任意JavaScript表達式內嵌（包括一個簡單的對象），並有陣營評估認爲並呈現結果的方式。

如果REACT看到{rows}，這是它認爲：

「爽哦，我有一個變量來渲染哦，看，它是一個數組什麼數組中的哦，我看到的第一個項目是！？一個叫做ProductCategoryRow的React元素，我會去渲染那個，下一步！我看到下一個是ProductRow，我會去渲染那個「

等等。

既然你是好奇的類型:) here's the source似乎檢查是否該項目是一個數組，如果是這樣，它呈現每個項目，因爲它將任何單個項目。

來源

2016-08-11 23:12:28

所以{}的花括號不僅僅意味着評估這個表達式，而且還渲染它裏面的內容？看着這個文檔我找不到任何東西。如果我使用React元素的鍵給它一個對象，它是否也以相同的方式工作？ – mangocaptain

我不這麼認爲，讓我更新答案... –

這就是前JSXTransformer，現在Babel，做。它遍歷JSX語法並生成有效的JavaScript。當它發現一個{}構造...

如果它是一個文字，則返回它。
如果它是JavaScript表達式，評估它並返回它（在情況下，結果是一個React Element，變換它）
如果它是一個React Element，變換它。
如果它是一個數組或React Element,轉換每個單獨並返回它們中的每一個。

上面的列表可能不完整，但你得到的圖片。

來源

2016-08-11 23:16:07

React的JSX如何通過插值打破數組？

回答

相關問題