没有花括号的 ES6 箭头函数答案

【问题标题】：ES6 Arrow function without curly braces没有花括号的 ES6 箭头函数
【发布时间】：2017-05-22 11:11:41
【问题描述】：

我很难理解以下 ES6 语法。我读了很多文档，似乎这里发生了不止一个变化：

const renderInput = props =>
  <div>
    <label>{props.placeholder}</label>
  </div>

以上是否等同于：

const renderInput = function renderInput(props) {
  return <div>
           <label>{props.placeholder}</label>
         </div>
}

【问题讨论】：

【解决方案1】：

是的，没错。当您只有一个表达式，并且它是您希望从函数返回的表达式时，您可以省略大括号。

由于<div><label>{props.placeholder}</label></div> 实际上是一个表达式（它被转换为React.createElement(......) 或类似的东西），并且您希望从renderInput 返回它，这确实是您使用无括号的方式箭头函数的版本。

如果您希望使用变量或进行一些其他计算（条件、for 循环等），您将无法省略括号。

【讨论】：

所以确实是const renderInput = function renderInput(props)，重复renderInput 两次？
无论如何，您只能在递归中使用该函数名。如果函数没有名称，浏览器的 devtools 将分配名称 const，因此两者几乎是等价的。严格来说，相当于const renderInput = function(props) {而不是function renderInput(props)。
@softcode：您可能想阅读Named function expressions demystified