Question

我正在上React课，看来我可以做：

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

或

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

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

Answer 1

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

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

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

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

Answer 2

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

那样编写代码

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})

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