一行箭头没有括号 - 不能有分号？

Question

我是React和ES6语法的新手，我觉得有趣的是，如果我写的话：

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

这不起作用。我收到“无法找到模块”错误。

但是如果我在箭头函数中删除分号：

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

它运作得很好。如果我保留分号但添加括号，如下：

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

这也有效。上面第一个例子不起作用的原因是什么？

Answer 1

为了正确理解为什么会出现这种情况，请确保我们知道表达式与块之间的区别。

在最基本的层面上，表达式是一些代表某种值的代码。所以123，a + b + c，calculateSomething()，这些都是表达式。表达式中不包含分号。

JS中的块是一个表达式列表。这些表达式由大括号{ }包围，并以分号分隔。

现在，回到箭头功能。箭头函数有两种形式：

(some, args) => <an expression>
(some, args) => { <an expression>; <an expression>; ... }

请注意，第一个表单采用表达式，一个表单。如果您使用块，则应该只有分号，就像第二种形式一样。

JSX的工作原理如下：

<input onChange={ <an expression> } />

你把你想要的道具名称，等号，然后是大括号中的单个表达。请记住，单个表达式没有分号。

箭头函数是一个表达式。所以，如果你在这里放一个分号......

<input onChange={ () => 'hello' ; } />

JS会看到表达式，然后看到它后面的分号并崩溃，因为它不应该在那里。