javascript - 在 ReactJS 中，我如何将 "this"绑定(bind)到 map() 函数内的父组件

Question

给定以下 javascript，为了传递 updateSelectedPages从父 React 组件到 Image 的方法.map() 内部的组件函数，我首先必须将它分配给一个变量，然后在函数内部使用该变量。有什么方法可以绑定(bind) this在函数内部成为父 React 组件，这样我就不必使用临时变量了吗？

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 这样的构建工具，通过 native 支持)，除了更短的编写之外，它们还具有 this 的词法范围。哪个removes the need for binding或将第二个参数传递给 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);
});