我是 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); }} />;
这也有效。上面第一个例子不起作用的原因是什么?
最佳答案
为了正确理解为什么会出现这种情况,我们需要确保了解表达式和 block 之间的区别。
在最基本的层面上,表达式是表示某种值的一段代码。所以123
、a + b + c
、calculateSomething()
,这些都是表达式。表达式中不包含分号。
JS 中的 block 是一个语句列表。这些语句用大括号 { }
括起来,并用分号分隔。
语句通常由一个表达式和一个分号组成。所以,
a = b + c;
是一个声明。还有其他类型的语句:let
、var
、for
、while
、return
等
现在,回到箭头函数。箭头函数有两种形式:
(some, args) => <an expression>
(some, args) => { <a statement>; <a statement>; ... }
请注意,第一种形式采用表达式,即单个表达式。如果您使用 block ,则只应使用分号,如第二种形式。
JSX 的工作原理如下:
<input onChange={ <an expression> } />
您可以输入所需 Prop 的名称、等号,然后将单个表达式放在大括号中。请记住,单个表达式没有分号。
箭头函数是一个表达式。所以,如果你要在这里加一个分号......
<input onChange={ () => 'hello' ; } />
JS 将看到表达式,然后看到其后面的分号并崩溃,因为它不应该在那里。
关于javascript - 没有大括号的单行箭头功能 - 不能有分号吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50501047/