我是 React 和 ES6 语法的新手，我发现有趣的是，如果我写：
return <input onChange={event => console.log(event.target.value);} />;
这是行不通的。我收到“找不到module”错误。
但是如果我删除箭头函数中的分号：
return <input onChange={event => console.log(event.target.value)} />;
它工作得很好。如果我保留分号但添加大括号，如下所示：
return <input onChange={event => { console.log(event.target.value); }} />;
这也有效。上面第一个例子不起作用的原因是什么？
为了正确理解为什么会这样，让我们确保我们知道expression和block之间的区别。
在最基本的层面上，表达式是一段代码，表示某种类型的值。所以123, a + b + c, calculateSomething(), 这些都是表达式。表达式中不包含分号。
一个块在JS是语句列表。这些语句用花括号括起来{ }，并用分号分隔。
很多时候，语句由一个表达式和一个分号组成。所以，
a = b + c;
是一个声明。还有其他类型的语句：let，var，for，while，return，等。
现在，回到箭头函数。箭头函数可以有两种形式：
(some, args) => <an expression>
(some, args) => { <a statement>; <a statement>; ... }
请注意，第一种形式采用一个表达式，一个表达式。如果您使用的是block，则应该只有分号，就像第二种形式一样。
JSX 是这样工作的：
<input onChange={ <an expression> } />
你把你想要的props的名字，一个等号，然后是一个单独的表达式放在大括号中。请记住，单个表达式没有分号。
箭头函数是一个表达式。所以，如果你在这里放一个分号......
<input onChange={ () => 'hello' ; } />
JS 会看到表达式，然后看到它后面的分号并崩溃，因为它不应该在那里。