小编典典

一条线箭头不带花括号的功能-不能使用分号?

reactjs

我是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); }} />;

这也可以。上面第一个示例不起作用的原因是什么?


阅读 253

收藏
2020-07-22

共1个答案

小编典典

为了正确理解为什么会发生这种情况,请确保我们知道 expressionblock 之间的区别。

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

一个 在JS是语句列表。这些语句用花括号括起来{ },并用分号分隔。

语句通常由表达式和分号组成。所以,

a = b + c;

是一个声明。还有其他类型的语句:letvarforwhilereturn,等。

现在,回到箭头功能。箭头功能可以有两种形式:

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

请注意,第一种形式采用一个 表达式 ,即一个 表达式 。如果您使用的是 block ,则应该只有分号,例如第二种形式。

JSX的工作方式如下:

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

您将所需的道具名称,等号和大括号内的单个表达式放在一起。请记住,单个表达式没有分号。

箭头函数是一个表达式。所以,如果您要在此处放置分号…

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

JS将看到该表达式,然后在其后看到分号并崩溃,因为它不应该在那里。

2020-07-22