Reactのrender（）関数のmap（）関数内で関数を呼び出す

Question

これは私の以前の質問のフォローアップですが、その中にマップがあれば、Reactのrender（）メソッドの中でどのように関数を呼び出しますか？

例（このコードはReact.Componentを拡張するクラスの内部にある）：どんなに私は、私はいつも「this.getItemInfo（）は関数ではありません」になってしまうしよう​​とするもの

getItemInfo(item){ 
    return `${item.Something} ${item.SomethingElse}` 
} 

render() { 

return (
<div className="someDiv"> 
    { 
     collection.map(function (item) { 
     return <div> {item.Name} {this.getItemInfo(item)} </div> 
    }) 
    } 
</div> 
); 

} 

。

私は私のmap()関数の内部thisにconsole.logを行なったし、それはInfactはWindowオブジェクトに参照のうえましたが、私はそれを変更する方法を見つけるように見えることはできません。

疲れ：

• はthisを渡す機能getItemInfo（）{..}
• としてgetItemInfoを規定の反応成分コンストラクタ
• 呼び出しでthis.getItemInfo = this.getItemInfo.bind(this)を呼び出す
マイマップ関数の2番目のパラメータとして .bind(this)以降 getItemInfo(item)

その他いくつかのこと....

なし。私はJavaScriptのthisのリファレンスをかなり新しくしており、わかりません。

私はここでこれを使用することに関連していくつかの答えを読んでいますrender()しかし、どれも私のために働いていないようです。

Answer 1

collection.map(function (item) { 
    return <div> {item.Name} {this.getItemInfo(item)} </div> 
}) 

だから、あなたのfunction(item)内部thisの範囲は、あなたのリアクトコンポーネントの範囲ではありません。

矢印機能() => {...}の代わりにfunction() {...}を使用すると、React.Componentのthisにアクセスできます。

はJavaScriptでthisの範囲についての詳細を読むにはこの

collection.map((item) => (
    <div> {item.Name} {this.getItemInfo.call(this, item)} </div> 
)) 

を試してみてください、あなたはここで読むことができます：http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/

を矢印の機能とthisの範囲について読むためには、別途」を参照してください。この 」セクションのhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions