Question

我正在关注Thinking in React Tutorial，并在下面的第2部分中看到var rows通过JSX插入到标记中。 JSX如何知道打破数组中的每个标记项？因为对我来说，{rows}的插值只会返回一个数组的标记，而不是逐个布局的每个标记行。所以我看到它返回[rowA, rowB, ...]而不是<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

大括号是一种内联执行任意JavaScript表达式（包括一个简单对象）的方法，让React对其进行求值并渲染结果。

当React看到{rows}时，这就是它的想法：

＆＃34;哦，很酷，我有一个变量来渲染。哦，看，它是一个阵列！阵列中的内容是什么？哦，我看到第一个项目是一个名为ProductCategoryRow的React元素，我将去渲染它。下一个！我看到下一个是ProductRow，我会去渲染＆＃34;

等等。

由于你是好奇的类型:) here's the source似乎检查项目是否是一个数组，如果是这样，它会将每个项目呈现为任何一个项目。

Answer 2

这就是前JSXTransformer，现在是Babel。它遍历JSX语法并生成有效的JavaScript。当它找到{}构造......

如果它是文字，请将其退回。
如果是JavaScript表达式，请对其进行评估并返回（如果结果为React Element，则转换）
如果它是React Element，转换它。
如果它是一个数组或React Element，转换，则各自单独返回。

上面的列表可能并不完整，但你明白了。

React的JSX如何通过插值突破数组？

2 个答案: