沒有括號的ES6箭頭功能

我很難理解以下ES6語法。我閱讀文檔頗有幾分好像有一個以上的變化發生在這裏：沒有括號的ES6箭頭功能

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

以上將相當於：

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

？

來源

2017-01-07 softcode

這不是ES6。可能是JSX。 – Quentin

是的，但你需要用反引號包裝HTML。和字符串參數需要一個領先的'$'...'$ {param}' – Mottie

@Mottie是的它是一樣的嗎？ – softcode

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

由於<div><label>{props.placeholder}</label></div>，其實，一個表達式（它被transpiled到React.createElement(......)或類似的東西），你希望從renderInput返回它，這的確是你如何使用箭頭功能的無支架版本。

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

來源

2017-01-07 21:43:47

所以它確實是'const renderInput = function renderInput（props）'，重複'renderInput'兩次？ – softcode

無論如何，您只能在遞歸中使用該函數名稱。如果函數沒有名字，瀏覽器的devtools會分配'const'的名字，所以兩者幾乎是等價的。嚴格來說，它等同於'const renderInput = function（props）{'not'function renderInput（props）'。 –

@softcode：您可能想閱讀[命名函數表達式揭祕]（https://kangax.github.io/nfe/） –

沒有括號的ES6箭頭功能

回答

相關問題