分号为什么抛出错误反应JSX？

Question

下面是我的JSX渲染方法的一部分 - 为什么后分号})抛出一个错误？这是一个在普通的JavaScript完全正常

<ul>
    {
        libraries.map(function (item) {
            return <li>{item.name.toLowerCase()}</li>;
        });
    }
</ul>

Answer 1

这是因为JSX {}表达式局限于单一的表达。

<div>{2 + 2; 3 + 3}</div>

..will抛出一个错误。

然而，你可以通过具有两个{}表达式解决这个

<div>{2 + 2}{3 + 3}</div>

有没有必要为分号如果只会有一个单一的表达。

如果你想获得的所有哈克的话，你可以使用鲜为人知的逗号操作符表达式做一些地方工作，返回用逗号分隔的最后一个表达式之前：

let x
...
<div>{x = 20, x}</div>

这将显示<div>20</div>