无花括号单行箭头函数为何不能加分号？React&ES6语法疑问

嗨，这个问题本质是ES6箭头函数的两种语法形式的规则差异导致的，我给你拆解清楚：

首先，ES6箭头函数有两种核心写法：

• 简洁体（Concise Body）：箭头后面直接跟一个表达式，不需要花括号，这个表达式的结果会自动作为函数的返回值
• 块体（Block Body）：箭头后面跟一对花括号，里面可以写多条语句，需要手动用return指定返回值（如果需要返回的话）

现在逐个分析你的三种写法：

1. 报错的写法 #

return <input onChange={event => console.log(event.target.value);} />;

这里你用了简洁体的结构（没有花括号），但在表达式console.log(event.target.value)后面加了分号。问题在于：简洁体要求箭头后面必须是一个单一表达式，而分号是语句的结束标记，加了分号之后，console.log(...);就变成了一条语句，不再是表达式，这违反了简洁体的语法规则，所以会触发语法错误（你看到的"Cannot find module"其实是语法错误导致编译失败的连锁反应，核心是箭头函数语法不合法）。

2. 正常运行的写法（移除分号） #

return <input onChange={event => console.log(event.target.value)} />;

去掉分号后，console.log(event.target.value)是一个合法的表达式（虽然console.log本身返回undefined，但它依然属于表达式范畴），完全符合简洁体的要求，所以语法正确，编译运行都没问题。

3. 正常运行的写法（加花括号保留分号） #

return <input onChange={event => { console.log(event.target.value); }} />;

这里你把箭头函数改成了块体结构（加了花括号），块体内部可以包含多条语句，每条语句结尾用分号是标准的JS语法，所以完全没问题。因为我们不需要这个onChange回调返回值，所以块体里不用写return也没关系。

总结一下：箭头函数的简洁体只能跟表达式，不能跟带分号的语句；如果要写语句（或者想保留分号），就必须用花括号包裹成块体。

内容的提问来源于stack exchange，提问作者rb612