在React render（）中的map（）函数内部调用函数

Question

这是我之前的问题的后续工作，但是如果我在其中的映射如何在React的render（）方法中调用函数。

示例（此代码在extended的类内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（）不是一个函数”。

我在函数内部进行了console.logon操作，实际上是在引用Window对象，但是我似乎找不到改变它的方法。this``map()

我累了：

• 定义getItemInfo为函数getItemInfo（）{..}
• this作为第二个参数传递给我的地图函数
• 调用this.getItemInfo = this.getItemInfo.bind(this)React的组件构造函数
• 打电话.bind(this)之后getItemInfo(item)

还有其他几件事…

没有工作。我对JavaScript的this参考还很陌生，我似乎无法弄清楚。

我在这里阅读了一些与在内部使用此方法有关的答案，render()但似乎没有一个对我有用。

Answer 1

collection.map(function (item) {
return

{item.Name} {this.getItemInfo(item)}

})

因此，this您内部function(item)的范围不是React组件的范围。

如果您使用箭头功能() => {...}代替，function() {...}您将可以访问thisReact.Component。

试试这个

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

要了解有关thisjavascript
范围的更多信息，可以在这里阅读：http : //javascriptissexy.com/javascript-variable-scope-
and-hoisting-explained/

要了解箭头功能和的范围this，请参阅https://developer.mozilla.org/zh-
CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions的
“对此不分开”部分