ES6箭头函数没有花括号

Question

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

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

以上内容是否等同于以下内容：

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

?

- softcode

---

这不是 ES6，可能是 JSX。 - Quentin

是的，但你需要用反引号包裹HTML代码。而且字符串参数需要以$开头... ${param}。 - Mottie

@Mottie 是的，它是一样的吗？ - softcode

如果您只有一个返回值，则无需添加返回。 - Khalid Azam

你是在问函数体周围缺少括号，props周围缺少括号还是两者都缺少？我问这个问题是因为已经有一个回答解决了第一个问题，但是你的标题明确提到了第二个问题（令人好奇的是还没有得到回答——尽管答案类似：如果你的函数只有一个参数，则不需要括号）。 - ruffin

Answer 1

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

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

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

- Madara's Ghost

---

那么它确实应该是 const renderInput = function renderInput(props)，重复两次使用 renderInput？ - softcode

你只能在递归中使用那个函数名。如果函数没有名称，浏览器的开发工具会分配const的名称，所以两者几乎是等价的。严格来说，它相当于 const renderInput = function(props) { 而不是 function renderInput(props)。 - Madara's Ghost

@softcode：你可能想阅读命名函数表达式揭秘。 - Felix Kling