.bind（this）から矢印関数へのコード変換

Question

私は最近、新しい関数を毎回作成するので、render関数でbind（this）を使うのは良いことではないと最近知らされました。したがって、私は矢印の関数を使用して、2つの<button>要素の下に示すように移動しています。

私が持っている質問はマップ機能です。これは.bind（this）も使用しています。これをES6/7形式に変換する方法はありますか？

return (
    <div> 
     <button onClick={()=>this.changeDisplayType("images")}>Images</button> 
     <button onClick={()=>this.changeDisplayType("audio")}>Audio</button> 
     { 
      resources.map(function(resource) { 
       return (
        <div key={resource.id}> 
         <div style={{fontWeight: "bold"}}>{resource.name}</div> 
         <div>({resource.info})</div> 
        </div> 
       ) 
      }.bind(this)) 
     } 


    </div> 
) 

また、.bind（これ）を完全に削除でき、私のコードはまだ機能することに気付きました。それゆえ、私はそれがそこにあるかどうか、それがどんな違いを生み出すのだろうとも思っています

Answer 1

これをES6/7形式に変換する方法はありますか？

はい、あなたはarrow functionを使用して、このようにそれを書き込むことができます。

resources.map(resource => { 
    return (
     <div key={resource.id}> 
      <div style={{fontWeight: "bold"}}>{resource.name}</div> 
      <div>({resource.info})</div> 
     </div> 
    ) 
}) 

を私は完全に（この）.bindを削除することができますし、私のコードはまだなぜ働きますか？

あなたがマップ本体にthisキーワードを使用していないので、あなたはコールバックメソッドを結合することなく、任意のクラスのプロパティやメソッドにアクセスしようとした場合、それはエラーをスローすることを意味します。

これを試してください：バインドを削除し、マップ本体内の状態値にアクセスしようとすると、エラーがスローされます。