在ReactJS中,我如何将"this"绑定到map()函数中的父组件

Question

给定以下javascript,为了将updateSelectedPages方法从父反应组件传递给函数Image内部的组件.map(),我首先必须将它分配给变量,然后在函数内使用该变量.有没有办法将this函数内部绑定为父反应组件,所以我不必使用临时变量？

var pageNumber = 0;
var updateSelectedPages = this.updateSelectedPages;
var images = this.props.resources.map(function(resource) {
  var arr = [];
  for(var x=0; x<resource.numPages; x++) {
    pageNumber++;
    arr.push(
      <Image src={'import/previewImage/' + resource.encodedName + '?page=' + pageNumber} number={pageNumber} updateSelectedPages={updateSelectedPages} key={pageNumber} />
    );
  }
  return arr;
}).reduce(function(a, b) {
  return a.concat(b);
});

Answer 1

Array.prototype.map采用第二个参数来设置回调函数的上下文. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map

所以,如果我理解你正确的问题,以下应该就够了:)

var pageNumber = 0;
var images = this.props.resources.map(function(resource) {
  var arr = [];
  for(var x=0; x<resource.numPages; x++) {
    pageNumber++;
    arr.push(
      <Image src={'import/previewImage/' + resource.encodedName + '?page=' + pageNumber} number={pageNumber} updateSelectedPages={this.updateSelectedPages} key={pageNumber} />
    );
  }
  return arr;
}, this).reduce(function(a, b) {
  return a.concat(b);
});

编辑2年以上: 现在你很可能在你的代码中使用箭头函数(如果只针对最新的浏览器或通过像babel这样的构建工具,可以通过本机支持),除了缩短编写时间,他们还有词法范围.this这消除了绑定或传递第二个arg的需要array.map()

let pageNumber = 0;
const images = this.props.resources.map(resource => { // <-- using arrow function removes the need to worry about `this`
  const arr = [];
  for(let x = 0; x < resource.numPages; x++) {
    pageNumber++;
    arr.push(
      <Image
        src={`import/previewImage/${resource.encodedName}?page=${pageNumber}`}
        number={pageNumber}
        updateSelectedPages={this.updateSelectedPages}
        key={pageNumber}
      />
    );
  }
  return arr;
}).reduce(function(a, b) {
  return a.concat(b);
});