Question

我有以下代码。

 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：无法读取属性＆＃39; getComponent＆＃39;未定义的。

但是，如果我使用相同的代码，只需在循环函数之后添加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的剩余功能，第二种方法对我来说并不常用。因此，有没有办法让它在循环中工作？

Answer 1

您的范围在.map方法中更改：

{results.map(function(result) {
    // `this` is different inside this anonymous function
})}

你想要做的是使用ES6和＃39;胖箭头语法，自动创建具有相同范围的匿名函数，或将其当前范围存储在变量中：

ES6 Fat Arrow（read more here）：

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，浏览器当前可以理解这些内容。这被认为是＃34;最佳实践＆＃34;，因为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> ); } });

Answer 2

您可以使用ES6箭头功能自动保留此上下文：

results（（result）=＆gt; { ... }）

或者只是将this作为第二个参数传递给map：

结果（函数（结果）{ ... }，这个）

React.JS无法读取Array循环中的属性

2 个答案: