リアクション式内で関数を実行する

Question

これはReactを学んでいる間に私が間違って見つけた答えに関する質問です。私は次の式を追加した場合、それは絶対にうまく動作しますnewDivのクラスに<div>要素内

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

：

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

      </div> 
     ) 
     } 

私が使用していない場合は

は、次のTableコンポーネントを取りますショートカットの機能の構文、またはこのようなES5関数を使用します（追加の{と}：

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

      </div> 
      }) 
     } 

動作しません。これは公式のリアクション「もの」ですか？ショートカットバージョンの矢印機能を使用する場合は、mapのようなES6関数しか使用できません。

Answer 1

：

return <div key={item.objectID}> 

単線​​矢印機能でES6で戻りが発生し、具体的である必要はなく、またあなたは手書きのバージョンあなたが使用している場合{ }

です返品を指示する必要があります

Answer 2

{ }の構文では、暗黙のリターンはないので、マップコールバックは何も生成しません。

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

returnを使用してください。

Answer 3

arrow関数は、中括弧を追加しない限り、デフォルトでreturnステートメントを返します。

あなたが返す必要が