反应。使用胖箭头功能的组件声明（ES6语法规范）

Question

学习反应我遇到了两种宣告方式

在off语句中使用经典 fat arrow语法。

return

最近我发现了简化版。

const Component = () => {
  return (
      <div>Hello</div>
  )
}

我无法找到解释为什么第二种方法有效，所以也许你可以分享一些关于这个主题的经验，甚至留下一篇涵盖它的文章链接？

Answer 1

箭头函数，其单个表达式未被花括号括起，因为它的主体被返回

(param1, param2, …, paramN) => expression
// equivalent to: (param1, param2, …, paramN) => { return expression; }

来源：mdn

Answer 2

• 如果在箭头函数中只写入单个元素，则默认返回该表达式。没有必要写大括号或返回关键字。
• 如果存在多个元素而不是应用花括号，则需要返回关键字。

cont component=()=>(
        <div>
          <div>hello</div>
          <p>How are you</p>
        </div>
          )

• 在上面的案例中，顶级div封装了所有内容，因此它被视为一个元素。这就是为什么上面调用将完美运行，返回一个jsx元素