ES6 沒有花括號的箭頭函數

Question

我很難理解以下 ES6 語法。 我閱讀了很多文檔，似乎這里發生了不止一個變化：

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

以上是否等同於：

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

?

Answer 1

對，那是正確的。 當您只有一個expression並且它是您希望從函數返回的表達式時，您可以省略大括號。

由於<div><label>{props.placeholder}</label></div>實際上是一個單獨的表達式（它被轉換為React.createElement(......)或類似的東西），並且您希望從renderInput返回它，這確實是您使用箭頭函數的無括號版本的方式。

如果您希望使用變量或進行一些其他計算（條件、for 循環等），您將無法省略括號。