为什么分号会在反应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>

..会抛出错误。

但是，您可以通过使用两个{}表达式

来解决此问题

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

如果只有一个表达式，则不需要分号。

如果你想了解它，你可以在表达式中使用鲜为人知的逗号运算符来做一些本地工作，然后返回用逗号分隔的最后一个表达式：

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

将显示<div>20</div>

You might not need semi-colons anywhere.