地图内的回调函数

Question

我是 Reactjs 的新手，正在使用 Cordova 和 Reactjs 制作目录浏览应用程序。

目前我收到错误 this.props.onClick is not a function，我发现 this.props.onClick 未定义。检查下面我的代码：

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

属性 folderOnClick 未定义。但我不知道如何解决这个问题。有人可以指出这一点吗？

Answer 1

一般 - this is the "dynamic this" issue in JavaScript.

但是，由于您将 ReactJS 与 JSX 结合使用，因此您的代码无论如何都支持转换中的 ES6 箭头函数：

var itemsInRepo = this.props.items.map(entry => (                
   <RepositoryEntry repositoryItem={entry} folderOnClick={this.updateListFromChild} />
));

您可以在 MDN 上查看语法以获取更多示例。

Answer 2

我们也可以这样进行。这是代码片段：

var itemsInRepo = this.props.items.map( 
        function(entry){                
            return(
             <RepositoryEntry 
               repositoryItem={entry} 
               folderOnClick={this.updateListFromChild} 
        />);

地图内的回调函数

Callback function within map

javascript

cordova

reactjs