web-dev-qa-db-ja.com

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

これは前の質問のフォローアップですが、マップが内部にある場合、Reactのrender（）メソッド内で関数を呼び出す方法を教えてください。

例（このコードは_React.Component_を拡張するクラス内にあります）：

_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>
);

}
_

私が何をしようとしても、常に「this.getItemInfo（）は関数ではありません」という結果になります。

map()関数内のthisで_console.log_を実行しましたが、実際にはWindowオブジェクトを参照していましたが、それを変更する方法が見つからないようです。

疲れた：

  • getItemInfoを関数getItemInfo（）{..}として定義する
  • thisをマップ関数の2番目のパラメーターとして渡す
  • reactのコンポーネントコンストラクターでthis.getItemInfo = this.getItemInfo.bind(this)を呼び出す
  • .bind(this)の後にgetItemInfo(item)を呼び出す

そして、他のいくつかのこと....

動作しませんでした。私はJavaScriptのthisリファレンスにかなり慣れていないので、理解できないようです。

render()内でこれを使用することに関連するいくつかの回答をここで読みましたが、それらのどれも私にとってはうまくいかなかったようです。

javascriptreactjsdictionarythis
8
Kobek
_collection.map(function (item) {
    return <div> {item.Name} {this.getItemInfo(item)} </div>
})
_

したがって、function(item)内のthisのスコープは、Reactコンポーネントのスコープではありません。

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

これを試して

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

JavaScriptのthisのスコープの詳細については、こちらをご覧ください。 http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/

矢印関数とthisのスコープについて読むには、 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/の「No this this」セクションを参照してください。関数/矢印関数

16
Naisheel Verdhan