javascript 在 React render() 中调用 map() 函数内的函数

Calling functions inside a map() function in React render()

提问by Kobek

This is a follow up to my previous question, but how do I call a function inside React's render() method, if I have a map inside that.

这是我上一个问题的后续，但是如果我在 React 的 render() 方法中调用一个函数，如果我在里面有一个地图。

Example (this code is inside a class that extends React.Component):

示例（此代码位于扩展的类中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>
);

}

No matter what I try I always end up getting "this.getItemInfo() is not a function".

无论我尝试什么，我总是最终得到“this.getItemInfo() 不是函数”。

I did a console.logon thisinside my map()function and it was infact refering to the Window object, but I can't seem to find a way to change that.

我做了console.log对this我的内部map()功能，这是逸岸指的Window对象，但我似乎无法找到一种方法来改变这种状况。

I tired:

我累了：

• defining getItemInfoas function getItemInfo(){..}
• passing thisas a second parameter to my map function
• calling this.getItemInfo = this.getItemInfo.bind(this)in react's component constructor
• calling .bind(this)after getItemInfo(item)

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

And a couple other things....

还有其他一些事情......

None worked. I am fairly new to JavaScript's thisreference, and I cant seem to figure it out.

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

I read some answers here related to using this inside render()but none of them seemed to work for me.

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

回答by Naisheel Verdhan

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

So, the scope of thisinside your function(item)is not the scope of your React Component.

所以，this你的insidefunction(item)的范围不是你的 React 组件的范围。

If you use arrow function () => {...}instead of function() {...}you will have access to thisof React.Component.

如果你使用箭头函数() => {...}而不是function() {...}你将可以访问thisReact.Component。

Try this

试试这个

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

To read more about scope of thisin javascript, you can read here: http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/

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

To read about arrow functions and scope of this, refer to "No separate this " section of https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

要阅读有关箭头函数和范围的信息this，请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions 的“No separate this”部分