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

【问题标题】：Why do semicolons throw error in react JSX?为什么分号在 React JSX 中会抛出错误？
【发布时间】：2016-12-17 13:00:32
【问题描述】：

下面是我在 JSX 中渲染方法的一部分 - 为什么}) 后面的分号会抛出错误？在普通的 JavaScript 中完全没问题

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

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

这是因为 JSX {} 表达式仅限于单个表达式。

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

..会抛出错误。

但是你可以通过两个{} 表达式来解决这个问题

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

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

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

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

将显示<div>20</div>

【讨论】：

分号分隔语句，而不是表达式。
不，你倒退了。在 JavaScript 中，您不会在 if 或 while 语句或 function 声明之后放置分号，但您在执行表达式后会这样做 - 编辑：实际上我不知道..您在 a 中返回表达式的值return 语句.. 但不是 if 语句。 javascript 很奇怪。
其实不是。你的答案是正确的。表达式是给你一个价值的东西。语句是赋值和控制流语句之类的东西。通常它们是由exoresions组成的。每个表达式也可以是一个语句，但反过来不行。分号的全部目的是结束一个语句。块语句是特殊的，它们不需要结束。如果您不使用块，您实际上在if 或while 之后放置分号。现在，如果您了解其中的区别，就应该清楚为什么不能将分号放在需要表达式的位置。
Sulthan，实际上 { code here } 是表达式。 “这里的代码”部分是表达式中的语句。在我看来，jsx 表达式“{ ... } 只允许一个陈述。我可能是错的，也许我想多了，但这只是我的两分钱。ETA：对不起 Sulthan，我读了你的第二条评论说得很好，把我想说的话说得更好。