[英]Callback function within map
I'm new to Reactjs and making a directory browsing application with Cordova and Reactjs. 我是Reactjs的新手,并使用Cordova和Reactjs制作了目录浏览应用程序。
Currently I get the error this.props.onClick is not a function
, I figured out that this.props.onClick
is undefined. 目前,我收到错误this.props.onClick is not a function
,我发现this.props.onClick
是未定义的。 Check my code below: 检查下面的代码:
var RepositoryList = React.createClass({
//updating the list from a child folder entry
updateListFromChild:function(childFolder){
console.log("in parent update");
},
render:function(){
console.log(this.updateListFromChild); //function()
var itemsInRepo = this.props.items.map(function(entry){
console.log("in map: " + this.updateListFromChild); //undefined
return (
<RepositoryEntry repositoryItem={entry}
folderOnClick={this.updateListFromChild} />
);
});
return (
<ul className="table-view">
{itemsInRepo}
</ul>
);
}
});
The property folderOnClick
is undefined. 属性folderOnClick
是未定义的。 But I don't know how to solve this problem. 但是我不知道如何解决这个问题。 Can someone point this out? 有人可以指出吗?
In general - this is the "dynamic this" issue in JavaScript . 通常, 这是JavaScript中的“动态this”问题 。
However, since you're using ReactJS with JSX, your code has support for ES6 arrow functions in the transform anyway: 但是,由于您将ReactJS与JSX结合使用,因此您的代码仍然在转换中支持ES6箭头功能:
var itemsInRepo = this.props.items.map(entry => (
<RepositoryEntry repositoryItem={entry} folderOnClick={this.updateListFromChild} />
));
You can see the syntax on MDN for more examples. 您可以在MDN上查看语法,以了解更多示例。
We can proceed with this way also. 我们也可以用这种方式进行。 Here is the code snippet: 这是代码片段:
var itemsInRepo = this.props.items.map(
function(entry){
return(
<RepositoryEntry
repositoryItem={entry}
folderOnClick={this.updateListFromChild}
/>);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.