为什么分号在React JSX中抛出错误？

Question

以下是JSX中我的render方法的一部分-为什么在})抛出错误后分号为何？在普通的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>

您可能在任何地方都不需要分号。