Comment JSX de React peut-il décomposer un tableau par interpolation?

Question

Je suis le Thinking in React Tutorial et sur la partie 2 ci-dessous voir que la var rows est interpolée dans le balisage par JSX. Comment JSX sait-il répartir chaque élément de marquage à l'intérieur du tableau? Parce que pour moi, l'interpolation de {rows} retournera simplement un tableau de balisage plutôt que chaque rangée de balisage disposés un par un. Donc, je le vois revenir [rowA, rowB, ...] au lieu de <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

accolades sont un moyen d'exécuter des expressions JavaScript arbitraire en ligne (y compris un objet simple) et ont React évaluer cela et rendre le résultat.

Quand React voit {rows}, voici ce qu'elle pense.

« oh cool, j'ai une variable à rendre Oh regarde, c'est un tableau Ce qui est dans le tableau Oh, je vois que le premier élément est! un élément appelé React ProductCategoryRow, je vais rendre ça. pROCHAINE! Je vois la suivante est un ProductRow, je vais rendre cette »

et ainsi de suite.

Depuis que vous êtes le type curieux :) here's the source qui semble vérifier pour voir si l'élément est un tableau, si c'est le cas, il rend chaque élément comme il le ferait un seul élément.

Answer 2

C'est ce que fait l'ancien JSXTransformer, maintenant Babel. Il traverse la syntaxe JSX et génère du JavaScript valide. Lorsqu'il trouve une construction {} ...

• S'il s'agit d'un littéral, renvoyez-le.
• Si c'est JavaScript expression, l'évaluer et le retourner (dans le cas où le résultat est un React Element, transforme il)
• Si c'est un React Element, transform il.
• Si c'est un tableau ou React Element, transformer chacun individuellement et retourner chacun d'entre eux.

La liste ci-dessus n'est probablement pas complète mais vous obtenez l'image.