React 的 JSX 是如何通过插值来打散一个数组的？

Question

我正在关注 Thinking in React Tutorial，在下面的第 2 部分中看到 var rows 通过 JSX 插入到标记中。 JSX 如何知道拆分数组中的每个标记项？因为对我来说，{rows} 的插值将只是 return 一个数组标记，而不是每个标记行一一排列。所以我看到它 returning [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>
        );
    },
});

Answer 1

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

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

"oh cool, I have a variable to render. Oh look, it's an array! What's in the array? Oh I see that the first item is a React element called ProductCategoryRow, I'll go render that. NEXT! I see the next one is a ProductRow, I'll go render that"

等等。

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

Answer 2

这就是以前的 JSXTransformer、现在的 Babel 所做的。它遍历 JSX 语法并生成有效的 JavaScript。当它找到 {} 结构时...

如果是文字，return它。
如果它是 JavaScript 表达式，计算它并 return 它（如果结果是 React Element，转换它）
如果是React Element，转换它。
如果它是数组或 React Element， 分别变换 和 return 每个。

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

React 的 JSX 是如何通过插值来打散一个数组的？

How does React's JSX breakout an array through interpolation?

html

arrays

markup

jsx

reactjs