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

Posted 2023-02-21

【中文标题】React 的 JSX 如何通过插值突破数组？

【英文标题】：How does React's JSX breakout an array through interpolation?

【发布时间】：2016-12-18 20:14:42

【问题描述】：

我正在关注Thinking in React Tutorial，并在下面的第 2 部分中看到 var rows 通过 JSX 插入到标记中。 JSX 是如何知道分解数组中的每个标记项的？因为对我来说，rows 的插值将简单地返回一个标记的array，而不是一个一个地布置每个标记行。所以我看到它返回[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】：

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

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

“哦，酷，我有一个要渲染的变量。哦，看，它是一个数组！数组中有什么？哦，我看到第一项是一个名为ProductCategoryRow 的 React 元素，我会去渲染它。下一个！我看到下一个是ProductRow，我去渲染它”

等等。

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

【讨论】：

所以 的花括号不仅意味着评估这个表达式，而且还呈现其中的内容？查看文档我找不到任何关于此的内容。如果我给它一个带有 React 元素键的对象，这是否会以同样的方式工作？

【参考方案2】：

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

如果是字面量，则返回它。 如果是 JavaScript 表达式，求值并返回（如果结果是 React Element，转换它） 如果是React Element，转换它。 如果是 Array 或 React Element，transform 每个单独并返回。

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