在React表達式中運行一個函數

所以這是一個關於我在學習React時偶然發現的答案的問題。在React表達式中運行一個函數

採取以下Table組件：

class Table extends Component { 
    render() { 
    const {list, pattern, onDismiss} = this.props; 
    return (
     <div className="newDiv"> 
     </div> 
    ) 
    } 
}

內<div>元素與類的newDiv如果我添加下面的表達式它工作絕對沒問題：

 { 
      list.filter(isSearched(pattern)).map(item => 
      <div key={item.objectID}> 

      </div> 
     ) 
     }

如果我不使用簡寫箭頭函數語法，或使用ES5函數，如下所示（請注意，額外的{和}：

 { 
      list.filter(isSearched(pattern)).map(item => { 
      <div key={item.objectID}> 

      </div> 
      }) 
     }

它不起作用。這是官方的React'東西'嗎？如果您使用箭頭函數的簡寫版本，那麼您只能像這樣使用ES6功能，如map？

來源

2017-08-09 OmisNomis

不確定這實際上有幫助。 – OmisNomis

您需要返回：

return <div key={item.objectID}>

在ES6單行箭頭函數的返回發生，沒有必要具體，也不是{ }

如果你使用的手寫版必須指示退貨

來源

2017-08-09 09:20:04

乾杯！當我暫時忘記了箭頭函數的語法 – OmisNomis

我已經把自己標記爲接受的答案，因爲它有更多的信息。所有其他答案都很棒。 – OmisNomis

很高興幫助！ –

由於{ }語法沒有隱式返回，所以在這種情況下，您的map-callback不會產生任何內容。

{ 
     list.filter(isSearched(pattern)).map(item => { 
     return <div key={item.objectID}></div> 
     }) 
    }

嘗試使用return聲明。

來源

2017-08-09 09:19:11 ivarni

當然沒有！所以這顯然是一個愚蠢的錯誤;當我剛剛使用箭頭函數語法暫時混淆時，我正在尋找React問題。 – OmisNomis

@OmisNomis沒有*愚蠢的錯誤*，只有學習機會。 – ivarni

謝謝@ivarni：大拇指： – OmisNomis

箭頭函數默認返回它的語句，除非你添加大括號，那麼它需要一個return語句。

來源

2017-08-09 09:19:39 larrydahooster

在React表達式中運行一個函數

回答

相關問題