“()=>(”和“()=> {”之间的区别

时间:2018-10-21 14:56:32

标签: reactjs next.js

我正在上React课,看来我可以做:

const Header = () => (
  <div></div>
)

const Header = () => {
  return (<div></div>)
}

请注意第一种语法中的常规括号,并且缺少return关键字。 第二种语法是我更熟悉的一种语法-显然是“函数的主体”。但是第一种语法是什么意思?顺便说一句,它来自Wes Bos的高级react类,以及在next.js的上下文中-可能会有所作为吗?

2 个答案:

答案 0 :(得分:1)

您无需显式添加return到return元素

const Header = () => (
  <div></div>
)

但是在这里,您需要显式地将return添加到return元素

const Header = () => {
  return (<div></div>)
}

答案 1 :(得分:1)

()=>表示您直接退货。因此,您可以像

那样编写代码
const Header = () => <div>something</div>
()之后的

=>与功能无关,与jsx有关。

此外,无论是否返回,您都只能编写一个表达式。像下面这样。

let squ = (n) =>  n * n;

let message = () => alert('some message')

唯一的例外是您不能以这种方式返回对象。以下代码不起作用。

const Header = () => {name: 'some thing', age: 30}

如果您想直接返回对象,则必须用()包装该对象。所以应该是

const Header = () => ({name: 'some thing', age: 30})

问题() => {”的下一部分与正常功能非常相似,我认为您的概念很清楚。当您不直接返回任何内容时就需要它。 在函数内执行某些操作,或在某些代码后返回某些内容。