React.JS无法读取数组循环中的属性
React.JS无法读取数组循环中的属性
提问于 2015-07-25 16:59:29
我有下面的代码。
var ImageList = React.createClass({
getComponent: function(index){
console.log(index);
},
render: function() {
var results = this.props.data;
return (
<div className="row">
{results.map(function(result) {
return(
<a className="th medium-3 columns" href="#" onClick= {this.getComponent.bind(this, 1)}>
<img alt="Embedded Image" key={result.id} src={"data:" + result.type + ";" + "base64," + result.image} />
</a>
)
})}
</div>
);
}
});第二个返回函数基本上循环一个图像数组并显示它们。我希望当单击OnClick事件时应该触发getComponent方法。但是，如果OnClick事件位于数组循环中，则会引发以下错误：
未定义的TypeError:无法读取未定义的属性“getComponent”。
但是，如果我使用相同的代码，即使在循环函数之后添加onClick，如下所示：
var ImageList = React.createClass({
getComponent: function(index){
console.log(index);
},
render: function() {
var results = this.props.data;
return (
<div className="row">
{results.map(function(result) {
return(
<img alt="Embedded Image" key={result.id} src={"data:" + result.type + ";" + "base64," + result.image} />
)
})}
<a className="th medium-3 columns" href="#" onClick= {this.getComponent.bind(this, 1)}>
</div>
);
}
});结果工作得很好。但是，由于我需要为每个图像保留一个唯一的id，所以我才能完成getComponent的剩余功能，所以第二个方法对我来说没有多大用处。因此，有没有办法让它在循环中工作呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-07-25 17:22:30
您的作用域在.map方法中更改：
{results.map(function(result) {
// `this` is different inside this anonymous function
})}您想要做的是要么使用ES6的fat箭头语法自动创建具有相同作用域的匿名函数，要么将其当前作用域存储在一个变量中：
ES6胖箭(在这里读更多)：
render: function() {
var results = this.props.data;
return (
<div className="row">
{results.map( (result) => {
return(
<a className="th medium-3 columns" href="#" onClick={that.getComponent.bind(that, 1)}>
<img alt="Embedded Image" key={result.id} src={"data:" + result.type + ";" + "base64," + result.image} />
</a>
)
})}
</div>
);
}
});请注意，您将需要一个转换程序(如babel.io )将其转换为浏览器当前理解要运行的ES2015。这被认为是“最佳实践”，因为ES6/7为JS带来了更好的功能。
存储对此的引用：
render: function() {
var results = this.props.data,
that = this;
return (
<div className="row">
{results.map(function(result) {
return(
<a className="th medium-3 columns" href="#" onClick={that.getComponent.bind(that, 1)}>
<img alt="Embedded Image" key={result.id} src={"data:" + result.type + ";" + "base64," + result.image} />
</a>
)
})}
</div>
);
}
});Stack Overflow用户
发布于 2016-05-24 21:21:27
可以使用ES6箭头函数自动保留此上下文：
结果(结果) => {.}
或者将this作为map的第二个param传递
结果(函数(结果){. }，此)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31628944
复制相关文章
相似问题
腾讯云开发者
